优先选取css,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;

}

伪类和伪元素的区别

理解：伪类：宦官；伪元素：皇帝。

根本区别

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

伪类：伪类的操作对象是原来的dom结构里就存在的元素。伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。

伪元素：创建对象。伪元素的操作对象是新生成的dom元素,这个对象不会占用DOM节点，不会出现在DOM中，不会改变文档的内容，不可复制，仅仅是在CSS渲染层加入。

//伪类

li:nth-child(2n+1) {

color: #00a2d4;

}

//伪元素

p::first-letter {

color: red;

}

一二三四

//相当于

一二三四

数量

一个css选择符(朝代)只能有一个伪元素，但可以有多个伪类

伪类可以进行多个拼接。伪元素不能进行拼接。

input:out-of-range:focus {

background: #00a2d4;

}

input:out-of-range + h2::after {

content: "超出范围"

}

结果：

位置

伪元素在后面，伪类在前面。

input {

display: block;

}

input::after {

content: "已勾选";

display: none;

width: 50px;

height: 50px;

margin-left: 12px;

}

input:checked::after {

display: block;

}

使用场景

伪类

状态类::link,:visited,:hover,:active,:focus

结构类:first-child,:last-child,:nth-child,:nth-of-type

表单类::checked,:disabled,:valid,:required

语言类::dir,:lang

伪元素

::before,::after

::first-letter,::first-line

::selection

::placeholder

::backdrop

语法

数量

位置

类与元素

使用场景

伪类

多个

前方和后方

修饰

多

伪元素

一个

后方

创建对象

少

优先级的计算规则

!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位全部相等，则后面的会覆盖前面的