2_css选择器.html 1.7 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. /* 标签选择器 */
  11. /* div{
  12. width: 200px;
  13. height: 200px;
  14. background: red;
  15. } */
  16. /* 选中id为div1的元素 */
  17. /* id选择器 一个页面中id是惟一的 只能选中一个 */
  18. /* #div1{
  19. width: 300px;
  20. height: 300px;
  21. background: green;
  22. } */
  23. /* class 类 可以选中多个 */
  24. /* class|类选择器 */
  25. /* .list{
  26. background: blue;
  27. } */
  28. /* 后代选择器 */
  29. /* 选中第一个ul中的list变色 */
  30. /* #ul1 .list{
  31. background: pink;
  32. } */
  33. /* .ul2 li{
  34. background: purple;
  35. } */
  36. /* 分组选择器|群组选择器 */
  37. #div1,#ul1 li{
  38. background: red;
  39. }
  40. /* 伪类选择器 */
  41. a:hover{
  42. /* background: orange; */
  43. color: orange;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div id="div1">1111</div>
  49. <div>222</div>
  50. <div>333</div>
  51. <ul id="ul1">
  52. <li>1111</li>
  53. <li class="list">1111</li>
  54. <li>1111</li>
  55. <li class="list">1111</li>
  56. <li>1111</li>
  57. <li class="list">1111</li>
  58. </ul>
  59. <ul class="ul2">
  60. <li>1111</li>
  61. <li class="list">1111</li>
  62. <li>1111</li>
  63. <li class="list">1111</li>
  64. <li>1111</li>
  65. <li class="list">1111</li>
  66. </ul>
  67. <a href="#">百度</a>
  68. </body>
  69. </html>