选择器权重及常用伪类

发布于：2022-04-18 13:50:33  栏目：技术文档

1 前端CSS选择器权重

     <div class="box" id="box">我是box</div>
<style>
    div{
        background-color: red;
        /* width失效权重低于（0，1，1） */
        width:1000px
    }
    div.box {
        width:300px;height:300px; 
        /* height失效，权重低于.(1,1,1) */
    }
    div#box.box{
        height:500px;
        /* 权重计算过程是  id=(1,0,0) class=(0,1.0) html标签=（0，0，1） 权重高覆盖权重低 */
    }
</style>

效果图

2常用伪类选择器

     <ul>
         <li class="item">item1</li>
         <li class="item">item2</li>
         <li class="item">item3</li>
         <li class="item">item4</li>
         <li class="item">item5</li>
         <li class="item">item6</li>
         <li class="item">item7</li>
         <li class="item">item8</li>
         <li class="item">item9</li>
         <li class="item">item10</li>
         <li class="item">item11</li>
     </ul>
<style>
   /* 第一种常用伪类 鼠标放上去效果 */
   li:hover{
       background-color: #333;
   }
   /* 第二种通常在列表中使用某一个或某一组。 :nth-of-type(an+b); */
   /* 01选中前三个 */
   ul li.item:nth-last-of-type(n+3){
    background-color: #555;
   }
   /* 匹配最后一个 */
   ul li.item:last-of-type{
    background-color: green;
   }
   /* 匹配一组 */
   ul li.item:nth-last-of-type(1n){
    background-color: #22ffcc;
   }
   /* 匹配偶数组 */
   ul li.item:nth-last-of-type(even){
    background-color: #22ffcc;
   } 
   /* 匹配奇数组 */
   ul li.item:nth-last-of-type(odd){
    background-color: #22ffcc;
   } 
</style>

相关推荐