Blogger Information
Blog 4
fans 0
comment 0
visits 2069
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器权重+伪类选择器
.
Original
349 people have browsed it

1. 选择器权重

html内容

  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. <link rel="stylesheet" href="style2.css">
  9. </head>
  10. <body>
  11. <h1>
  12. <!-- 权重(0,0,2) -->
  13. <div>实例测试一</div>
  14. <!-- 权重(0,1,0) -->
  15. <div class="test">实例测试二</div>
  16. <!-- 权重(1,0,0) -->
  17. <div id="test">实例测试三</div>
  18. <!-- important无视权重 -->
  19. <div id="test" class="test2">实例测试四</div>
  20. </h1>
  21. </body>
  22. </html>

style2.css内容

  1. h1 {
  2. color: aqua;
  3. }
  4. #test {
  5. color: blue;
  6. }
  7. .test {
  8. color: purple;
  9. }
  10. .test2 {
  11. color: brown !important;
  12. }

效果截图

选择器权重

2. 常用伪类选择器

  1. 关系式::nth-of-type(an+b),其中ab为人为赋值,n为自增函数(0123....).(a为系数,b为偏移量)
  2. 从头开始计数为: :nth-of-type()
  3. 从后面开始计数为: nth-last-of-type()
  4. 偶数行实现样式::nth-last-of-type(even)
  5. 奇数行实现样式::nth-last-of-type(odd)

html内容

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>伪类选择器</title>
  8. <style>
  9. @import url("css/selector-fake.css");
  10. </style>
  11. </head>
  12. <body>
  13. <ul class="list">
  14. <li>item1</li>
  15. <li>item2</li>
  16. <li>item3</li>
  17. <li>item4</li>
  18. <li>item5</li>
  19. <li>item6</li>
  20. <li>item7</li>
  21. <li>item8</li>
  22. <li>item9</li>
  23. <li>item10</li>
  24. <li>item11</li>
  25. <li>item12</li>
  26. <li>item13</li>
  27. <li>item14</li>
  28. <li>item15</li>
  29. <li>item16</li>
  30. <li>item17</li>
  31. <li>item18</li>
  32. </ul>
  33. </body>
  34. </html>

selector-fake.css内容

  1. .list>li:nth-of-type(3n+2) {
  2. background-color: violet;
  3. }
  4. /* 当n=0,1,2,3,4,5时,具体的表现结果 */

效果展示

伪类选择器

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post