CSS选择器的优先级和权重分析

来源：动视网责编：小采时间：2020-11-27 20:03:07

CSS选择器的优先级和权重分析

CSS选择器的优先级和权重分析:本文主要和大家分享CSS 选择器的优先级和权重分析，希望能帮助大家更加掌握学习css选择器。基本选择器选择器名称实例描述版本*通用选择器（Universal selectors）*匹配所有的元素2.1E标签选择器（Type selectors）p匹配所有的 <p>

推荐度：

点击下载本文 文档为doc格式

导读CSS选择器的优先级和权重分析:本文主要和大家分享CSS 选择器的优先级和权重分析，希望能帮助大家更加掌握学习css选择器。基本选择器选择器名称实例描述版本*通用选择器（Universal selectors）*匹配所有的元素2.1E标签选择器（Type selectors）p匹配所有的 <p>

结构性伪类（Structural pseudo-classes）

??结构性伪类用于指定文档的特定结构。

选择器	实例	描述	版本
:root	`:root`	匹配文档的根元素	3
:nth-child(n)	`:nth-child(n)`	匹配其父元素的第 n 个子元素	3
:nth-last-child(n)	`:nth-last-child(n)`	匹配其父类倒数第 n 个子元素	3
:nth-of-type(n)	`:nth-of-type(n)`	匹配其父类第 n 个有着相同选择器的子元素	3
:nth-last-of-type(n)	`:nth-last-of-type(n)`	匹配其父类倒数第 n 个有着相同选择器的子元素	3
:first-child	`:first-child`	匹配其父类元素的第一个子元素	3
:last-child	`:last-child`	匹配其父类元素的最后一个子元素	3
:last-child	`:last-child`	匹配其父类元素的最后一个子元素	3
:first-of-type	`:first-of-type`	匹配其父类元素第一个有着相同选择器的子元素	3
:last-of-type	`:first-of-type`	匹配其父类元素最后一个有着相同选择器的子元素	3
:only-child	`:only-child`	匹配其父类的唯一子元素	3
:only-of-type	`:only-child`	匹配其父类的唯一有着相同选择器的子元素	3
:empty	`:empty`	匹配没有子元素（包括文字节点）的元素	3

:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n) 中 n 是从 0 开始的整数，表达式可写成 an+b， a 和 b 是 0 或正整数，表达式的写法相当于把每 a 个子元素分成一组，取每组的第 b 个元素；取第奇数、偶数个子元素可写表达式为 2n+1 或 even、2n 或 odd。

??否定伪类是用来选择所有非指定类型元素的其他元素。

选择器	实例	描述	版本
:not(s)	`input:not([type="text"])`	匹配所有非指定类型的其他元素	3

伪元素

??伪元素（Pseudo-elements）是指不存在与文档树中的抽象。

选择器	实例	描述	版本
::first-line	`::first-line`	匹配元素文本内容的首行	1
::first-letter	`::first-letter`	匹配元素文本内容的首个字母	1
::before	`::before`	元素之前	2.1
::after	`::after`	元素之后	2.1