Blogger Information
Blog 9
fans 0
comment 0
visits 4009
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器权重详细说明、伪类实操演练
Original
376 people have browsed it

选择器权重及实例

id/class/tag三个样式选择器有权重为别为于百位、十位、个位,显示该档位选择器的数量,实例分别列举id/class/tag三种选择器的权重

  1. <h1>hello</h1>
  2. <h1 class="demo">hello</h1>
  3. <h1 id="active">hello</h1>

图例:

  1. tag权重
  2. class权重
  3. id权重

伪类选择器代码及演示

  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. @import url(css1/selector-base.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. </ul>
  25. </body>
  26. </html>

首行、前三、后三、后行、偶、奇CSS及演示

  1. .list>li:first-of-type {
  2. background-color: violet;
  3. }
  4. .list>:nth-of-type(-n+3) {
  5. background-color: violet;
  6. }
  7. .list>:nth-last-of-type(-n+3) {
  8. background-color: violet;
  9. }
  10. .list>:last-of-type {
  11. background-color: violet;
  12. }
  13. .list>:nth-of-type(even) {
  14. background-color: violet;
  15. }
  16. .list>:nth-of-type(odd) {
  17. background-color: violet;
  18. }

实例图:





伪类函数的计算过程

伪类函数的参数为an+b
a取值范围为[0,1,2,,,]
n取值范围为[0,1,2,,,]
b为偏移量
当取一个数值时,a为0,参数为b
当取一组数值时,a为1,参数为n+b

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