2_css选择器.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. /* 标签选择器 选中页面中所有标签名为xx的元素 */
  10. /* div{
  11. background: red;
  12. }
  13. */
  14. /* id选择器 选中id为xx的,唯一的*/
  15. #div2{
  16. background: green;
  17. }
  18. /* 类选择器|class选择器 选中所有class名为xx的 */
  19. .aa{
  20. background: blue;
  21. }
  22. /* 后代选择器 */
  23. #ul1 li{
  24. background: pink;
  25. }
  26. /* 群组选择器 */
  27. .aa,#ul1{
  28. background: purple;
  29. }
  30. /* 伪类选择器 */
  31. /* :hover鼠标悬浮 */
  32. a:hover{
  33. background: aqua;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="aa">111</div>
  39. <!-- 一个页面中id是唯一的 -->
  40. <div id="div2">111</div>
  41. <div class="aa">111</div>
  42. <div>111</div>
  43. <ul id="ul1">
  44. <li>111</li>
  45. <li>111</li>
  46. <li>111</li>
  47. </ul>
  48. <ul>
  49. <li>111</li>
  50. <li>111</li>
  51. <li>111</li>
  52. </ul>
  53. <a href="">百度</a>
  54. </body>
  55. </html>