CSS权重？每种选择器的具体权重比例？本文已参与「新人创作礼」活动，一起开启掘金创作之路。 CSS权重？每种选择器的具体

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

CSS权重？每种选择器的具体权重比例？

!important > 行内样式 > id选择器 > 类/伪类选择器 > 元素/伪元素选择器 > 通配符选择器/关系选择器

10000          1000      100        10              1                     0

1.元素选择器

p{}

2.id选择器

#id{}（id不能重复，即使出现相同效果）

在这里插入图片描述

3.类选择器

.class

在这里插入图片描述

4.通配选择器

页面中的所有元素

*{}

在这里插入图片描述

5.交集选择器

选择器1选择器2选择器3选择器n{}

在这里插入图片描述

6.并集选择器

p,div,table{}

在这里插入图片描述

7.关系选择器

子元素选择器

父元素 > 子元素

在这里插入图片描述

后代选择器

祖先后代{}

在这里插入图片描述

兄弟选择器

语法：前一个 + 下一个（紧挨着的）前一个 ~ 后一个：所有的兄弟

在这里插入图片描述

属性选择器

距离div[title]

div元素且带有title属性的元素

伪类选择器

用来描述一个元素的特殊状态（例如：处在第一个子元素状态下的元素）一般情况下使用：开头（：first-child）：hover :visited 比如：第一个子元素，被点击的元素，鼠标移入的元素…… ：first-child 第一个子元素：last-child 最后一个子元素：nth-child选中第n个子元素特殊值： n 第n个，n的范围是0到正无穷 2n或even 表示选中偶数位的元素 2n+1或odd 表示选中奇数位的元素以上的伪类都是根据所有的子元素进行排序的。（如果ul之后的第一个子元素为span，则下图的第一个li不显示样式）（使用first-of-type ，如果ul之后的第一个子元素为span，则下图的第一个ul会显示样式；因为first-of-type是在同类型中进行排序。） not（）否定伪类。将符合条件的元素从选择器中去除在这里插入图片描述

伪元素选择器

伪元素伪选择器用于表示无法用 HTML 语义表达的实体。表示页面中一些特殊的并不真实存在的元素（特殊的位置）形式： ::开头

在这里插入图片描述