ASCII码 ASCII码

实例演示：选择器权重，常用伪类选择器

发布于：2022-04-23 15:40:57  栏目：技术文档

选择器权重

代码

  1. <body>
  3.    <ul>
  4.        <li class="item1">权重（0，1，2）大于（0，1，1），所以背景色显示蓝色，而非橙色</li>
  5.        <li class="item1">权重2</li>
  6.        <li class="item2" id="weight">权重（1，0，1）大于（0，1，1），所以背景色显示蓝色，而非粉红色</li>
  7.        <li class="item2">权重4</li>
  8.        <li class="item3">权重5</li>
  9.        <li class="item3">权重6</li>
  10.    </ul>
  12.    <style>
  14.     /* id: 千位 , class: 百位 , tag: 个位 */
  15.     /* id: 1 , class: 0 , tag: 1 */
  16.     /* 权重（1，0，1） */ 
  17.     #weight {background-color: blue;}
  19.     /* id: 0 , class: 1, tag: 2 */ 
  20.     /* 权重（0，1，2） */
  21.     ul li.item1 {background-color: cyan;}
  23.     /* id: 0 , class: 1, tag: 1 */
  24.     /* 权重（0，1，1） */
  25.     li.item1 {background-color: orange;}
  26.     li.item2 {background-color: violet;}
  28.     /* id: 0 , class: 0, tag: 1 */
  29.     /* 权重（0，0，1） */
  30.     li {background-color: green;}
  32.     </style>
  34. </body>

效果

常用伪类选择器

代码

  1. <body>
  2.     <ul>
  3.         <li>item1</li>
  4.         <li>item2</li>
  5.         <li>item3</li>
  6.         <li>item4</li>
  7.         <li>item5</li>
  8.         <li>item6</li>
  9.         <li>item7</li>
  10.         <li>item8</li>
  11.         <li>item9</li>
  12.         <li>item10</li>
  13.         <li>item11</li>
  14.         <li>item12</li>
  15.         <li>item13</li>
  16.         <li>item14</li>
  17.     </ul>
  18.     <style>
  20.         /* 匹配第1个 */
  21.         li:first-of-type{ color:orange }
  23.         /* :nth-of-type(an+b) */
  25.         /* 匹配第4个 */
  26.         /* a=0,n=[0,1,...], b = 4 */
  27.         li:nth-of-type(4){ color:pink }
  29.         /* a=-1  */
  30.         /* 取前3个 */
  31.         li:nth-of-type(-n+3) { background-color: yellow; }
  32.         /* 取后3个 */
  33.         li:nth-last-of-type(-n+3) { background-color:lightseagreen; } 
  35.         /* 匹配第9个及之后 */
  36.         /* a=1,n=[0,1,...], b = 9  */
  37.         li:nth-of-type(n+9){ color:red }
  39.         /* 匹配最后1个 */
  40.         li:last-of-type{ color: blue }
  42.     </style>    
  43. </body>

效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行