2_css选择器.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. /* 选中元素 */
  10. /* 标签选择器 通过标签名选中所有复合条件元素 */
  11. /* div{
  12. background: red;
  13. } */
  14. /* id选择器 唯一的*/
  15. /* #div1{
  16. background: blue;
  17. } */
  18. /* li{
  19. background: pink;
  20. } */
  21. /* class 一类"." 选中所有class名为list1的元素*/
  22. /* .list1{
  23. background: yellow;
  24. } */
  25. /* xx xx后代选择器 */
  26. #ul1 .list1{
  27. background: palevioletred;
  28. }
  29. #ul2 .list1{
  30. background: lawngreen;
  31. }
  32. /* 群组/分组选择器 */
  33. /* #div1{
  34. background: red;
  35. }
  36. #ul1{
  37. background: red;
  38. } */
  39. #div1,#ul1{
  40. background: red;
  41. }
  42. /* 伪类选择器
  43. :hover鼠标划入
  44. */
  45. a:hover{
  46. background: darkorange;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <!-- id是唯一的标识 -->
  52. <div id="div1">我是一个div</div>
  53. <div>我是一个div222</div>
  54. <ul id="ul1">
  55. <li class="list1">1111</li>
  56. <li>2222</li>
  57. <li class="list1">3333</li>
  58. <li>4444</li>
  59. </ul>
  60. <ul id="ul2">
  61. <li class="list1">1111</li>
  62. <li>2222</li>
  63. <li class="list1">3333</li>
  64. <li>4444</li>
  65. </ul>
  66. <a href="">baidu</a>
  67. </body>
  68. </html>