CSS选择器及优先级

选择器分类

id选择器

#wrap{ background: black; }

类选择器

.wrap{ background: black; }

标签选择器

div{
    margin:0;
}

属性选择器

[type=text] {
    background: black;
}

伪类选择器

1. a元素的伪类：link、visited、active、hover。
2. 其他
   (1) li:first-child{} (修饰第一个li)
   (2) li:last-child{} (修饰最后一个li)
   (3) li:nth-child{} (修饰第()个li)
   (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

    

    

    


li:first-child {
    border:1px solid black;
}
li:last-child {
    border:1px solid red;
}
li:nth-child(2){
    border:1px solid yellow;
}

伪元素选择器

p::first-line {
  color: blue;
  text-transform: uppercase;
}

群选择器
以，分隔(逗号分隔开需要修饰的模块名)

    

    



.qun,span {
    margin:0;
}

全局选择器
以*开头(星号标在大括号前，修饰了包含body所有的标签)

* {
    margin:0;
}

紧邻兄弟选择器（相邻选择器）
以+隔开相邻关系的元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。

    

        第一
    
    
第二
 /*修饰*/
    
第三


.first+p{
    margin:0;
}

一般兄弟选择器
以~隔开兄弟关系的元素，第二个节点在第一个节点后面的任意位置，并且这俩节点的父节点相同。

    

        第一
    
    
第二
 /*修饰*/
    
第三
 /*修饰*/


.first~p{
    margin:0;
}

子元素选择器
以>隔开父子级元素，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。

    

        第一
    
    
第二
    
第三
    第四 /*修饰*/


.qun > span {
    color:black;
}

后代选择器
以空格隔开包含关系的元素，选择元素的所有后代

    

        第一 /*修饰*/
    
    
第二
    
第三
    第四 /*修饰*/


.qun span {
    color:black;
}

优先级的计算规则

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。

优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：

1. 如果存在内联样式，那么A = 1, 否则A = 0;
2. B的值等于ID选择器出现的次数;
3. C的值等于类选择器和属性选择器和伪类出现的总次数;
4. D的值等于标签选择器和伪元素出现的总次数 。

例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出A B C D的值：

1. 因为没有内联样式 ，所以A = 0;
2. ID选择器总共出现了1次，B = 1;
3. 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以C = (1 + 0 + 0) = 1；
4. 标签选择器出现了3次， 伪元素出现了0次，所以D = (3 + 0) = 3;

上面算出的A、B、C、D可以简记作：(0, 1, 1, 3)。
比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的

参考文章：https://www.cnblogs.com/yugege/p/9918232.html