2_css选择器.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. /* h2{
  11. background: red;
  12. } */
  13. /* 通过设置id 一个页面中id是唯一的 */
  14. /* id选择器 */
  15. #title1{
  16. background: purple;
  17. }
  18. /* class 属性 代表一类 类*/
  19. /* class 选择器 */
  20. /* .list{
  21. background: peru;
  22. } */
  23. /* 后代选择器 */ /* 选中id为ul2中的 class名为list的元素 */
  24. /* #ul2 .list{
  25. background: palevioletred;
  26. } */
  27. /* 子代选择器 */
  28. #ul2 > .list{
  29. background: palevioletred;
  30. }
  31. /* 伪类选择器 */
  32. a:hover{
  33. background: gold;
  34. color: green;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <h2 id="title1">11111</h2>
  40. <h2 id="title2">2222</h2>
  41. <h2 id="title3">33333</h2>
  42. <h2 id="title4">44444</h2>
  43. <ul id="ul1">
  44. <li class="list">1111</li>
  45. <li>2222</li>
  46. <li>3333</li>
  47. <li class="list">4444</li>
  48. </ul>
  49. <ul id="ul2">
  50. <li class="list">1111</li>
  51. <li>
  52. 222
  53. <ul>
  54. <li class="list">11-222</li>
  55. </ul>
  56. </li>
  57. <li>3333</li>
  58. <li class="list">4444</li>
  59. </ul>
  60. <a href="#">百度</a>
  61. </body>
  62. </html>