截至目前最新的选择器以和权重

周五下了班，来把css中所有的选择器给大家做个细致的大集合，满满干货，包含了目前所有的选择器以及其权重和具体使用方法。建议收藏，在开发中使用起来便捷度也能拉满，废话不多说。直接开始：

首先为了方便初学的小伙伴记忆，先灌输一下基础概念。

各个选择器的权重:

标签选择器 0 0 0 1 简单记忆 1

类选择器 0 0 1 0 简单记忆10

id选择器 0 1 0 0 简单记忆100

行内样式 1 0 0 0 简单记忆1000

!important如果不是继承,权重最高 天下第一

复合选择器权重会叠加： div p 后代选择器： 0001 0001 = 0002

不会有进位的情况，比如 0,0,0, 10

优先级相同,会执行层叠性,写在最后面的会生效.

权重由大到小分别为以下：

注：权重的计算中，没有进位！！！

1.！importent权重为无穷大。

注：!important不能提高继承的优先级 只要是继承 优先级最低.

1.  
   div {
2.  
    
3.  
   color: pink!important;
4.  
    
5.  
   }

2.行内css样式 权重为1000（直接写在html标签内的样式属性）

行内样式写法：

• 任意标签【容器级别标签和文本级别标签】都可以添加行内样式
• 需要在双标签、单标签的开始标签位置书写
• 在开始标签名字后面，别忘记有空格，给这个标签添加一个style（英文：样式，风格）属性
• style属性值得写法：样式属性名字 ： 样式属性的属性值 ；
• 别忘记在样式属性值后面加一个分号，代表当前这一个样式设置完毕，进行下一个样式属性
• 一个标签可以同时设置多个样式，多个样式之间用分号隔开

　　示例如下： 

 <div style="color: red;"></div>

3.id选择器 权重为100

注：id选择器就像我们的身份证号码一样，只能有一个。id定义，#调用！

例：

为 id="liliwuang" 的元素设置样式：

1.  
   #liliwuang
2.  
   {
3.  
   background-color:yellow;
4.  
   }

4.类选择器 权重为10 

注：类选择器也叫class选择器，就像我们的名字一样，可以有很多个，并且多个标签可以用同一个类名。class定义，.调用

例：

为 class="liliwuang" 的元素设置样式：

1.  
   .liliwuang
2.  
   {
3.  
   background-color:yellow;
4.  
   }

5.标签选择器： 权重为1

直接用标签调用

例：

为h2标签设置样式：

h2{ background-color:yellow; }

复合选择器：权重会叠加

1.后代选择器

选择器1 选择器2{
    属性:属性值;
    ...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}

2.子代选择器（亲儿子选择器）

选择器1> 选择器2{
    属性:属性值;
    ...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}

3.并集选择器

选择器1, 选择器2{
    属性:属性值;
    ...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
 

1.  
   div,
2.  
   p,
3.  
   span,
4.  
   .box p{color:pink;}

4.交集选择器

选择器1选择器2{
    属性:属性值;
    ...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
 

1.  
   div.box{
2.  
       color:green;
3.  
   }

5.伪类选择器  自身的权重为10

选择器:hover{
    属性:属性值;
    ...
}
鼠标经过时候的样式

1.  
   a:hover{}
2.  
   div:hover{}
3.  
   .box:hover{}

:的前面和后面不能有空格

6.伪元素选择器 自身权重为1

选择器：：before/after{

content：""；（必须写content否则无效）

}

1.  
   liliwuang::after{
2.  
   content:"lili";
3.  
   color:red;
4.  
   }

7.结构伪类选择器 自身权重为10

很好用的一种选择器，可以免去取名字的烦恼

例：

1.  
   <ul>
2.  
    
3.  
           <li>第1</li>
4.  
    
5.  
           <li>第2</li>
6.  
    
7.  
           <li>第3</li>
8.  
    
9.  
           <li>第4</li>
10.  
     
11.  
            <li>第5</li>
12.  
     
13.  
            <li>第6</li>
14.  
     
15.  
            <li>第7</li>
16.  
     
17.  
            <li>第8</li>
18.  
     
19.  
            <li>第9</li>
20.  
     
21.  
        </ul>

如果用常规选择器，选起来那叫一个麻烦，这时候用我们的结构伪类选择器就是一个很好的选择。

如果要选中其中第三个li可以这样操作：

1.  
   ul li:nth-child(3){
2.  
   color:red;
3.  
   }

除此之外还有很多种拓展写法：

仅选中其中的34567项

1.  
   ul li:nth-child(n 3):not(:nth-child(n 8)) {
2.  
   color: red;
3.  
   }

写法还有很多拓展可以和我私信交流

nth-child和nth-child-type的区别：

同级中存在不同种类标签，则可以使用nth-child-type来区别选中。

我们可以这样理解nth-child-type：

先在同级里找到所有的标签类型，然后根据 n 进行匹配；

一般常用的选择器就总结到这了，下次给大家奉上css中后续的各种进阶的选择器。bye~

这篇好文章是转载于：学新通技术网