2_选择器.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. /* div + p {
  11. background: red;
  12. } */
  13. /* div ~ p {
  14. background: red;
  15. } */
  16. /* 属性选择器 */
  17. /* li[class] {
  18. background: red;
  19. } */
  20. /* li[class='aa'] {
  21. background: red;
  22. } */
  23. /* li[class~='a']{
  24. background: red;
  25. } */
  26. /* li[class^='a']{
  27. background: red;
  28. } */
  29. /* li[class*='a']{
  30. background: red;
  31. } */
  32. /* li[class$='b']{
  33. background: red;
  34. } */
  35. /* li:last-child{
  36. background: red;
  37. } */
  38. /* li:nth-child(3){
  39. background: red;
  40. } */
  41. /* li:nth-child(even){
  42. background: red;
  43. } */
  44. /* li:nth-child(odd){
  45. background: red;
  46. } */
  47. </style>
  48. </head>
  49. <body>
  50. <!--
  51. id选择器
  52. class选择器
  53. 标签选择器
  54. 属性选择器
  55. 后代选择器
  56. 子代选择器
  57. 群组选择器
  58. 伪类选择器
  59. 伪元素选择器
  60. -->
  61. <p>000000</p>
  62. <div>111111</div>
  63. <p>22222</p>
  64. <p>33333</p>
  65. <ul>
  66. <li class="aa">111111</li>
  67. <li>222222</li>
  68. <li class="bb">333333</li>
  69. <li class="ab">444444</li>
  70. <li class="a">555555</li>
  71. <li class="ba">666666</li>
  72. </ul>
  73. </body>
  74. </html>