html5基本选择器的优先,CSS选择器及优先级

选择器分类

id选择器

#wrap{ background: black; }

类选择器

.wrap{ background: black; }

标签选择器

div{

margin:0;

}

属性选择器

[type=text] {

background: black;

}

伪类选择器

a元素的伪类：link、visited、active、hover。

其他

(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的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么A = 1, 否则A = 0;

B的值等于ID选择器出现的次数;

C的值等于类选择器和属性选择器和伪类出现的总次数;

D的值等于标签选择器和伪元素出现的总次数 。

例子：

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

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

因为没有内联样式 ，所以A = 0;

ID选择器总共出现了1次，B = 1;

类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以C = (1 + 0 + 0) = 1；

标签选择器出现了3次， 伪元素出现了0次，所以D = (3 + 0) = 3;

上面算出的A、B、C、D可以简记作：(0, 1, 1, 3)。

比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的

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