ASCII码 ASCII码

选择器权重详细说明、伪类实操演练

发布于：2022-03-26 09:59:42  栏目：技术文档

选择器权重及实例

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. } 
  5. .list>:nth-of-type(-n+3) {
  6.     background-color: violet;
  7. } 
  8. .list>:nth-last-of-type(-n+3) {
  9.     background-color: violet;
  10. } 
  11. .list>:last-of-type {
  12.     background-color: violet;
  13. }
  14. .list>:nth-of-type(even) {
  15.     background-color: violet;
  16. }
  17. .list>:nth-of-type(odd) {
  18.     background-color: violet;
  19. }

实例图：

伪类函数的计算过程

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

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行