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

本文主要和大家分享CSS 选择器的优先级和权重分析，希望能帮助大家更加掌握学习css选择器。

基本选择器

选择器名 称实 例描 述版 本*通用选择器（Universal selectors）*匹配所有的元素2.1E标签选择器（Type selectors）p匹配所有的 <p>1.class类选择器（Class selectors）.nav匹配所有 class="nav" 的元素1#idID选择器（ID selectors）#wrapper匹配所有 id="wrapper" 的元素1E[attr]属性选择器（Attribute selectors）a[data-url]匹配所有 data-url 属性的 <a> 的元素2.1E[attr=val]属性选择器（Attribute selectors）a[data-url='http']匹配所有 data-url="http" 属性的 <a> 的元素2.1E[attr~=val]属性选择器（Attribute selectors）a[data-url~='http']匹配所有 data-url 属性包含 http 的 <a> 元素2.1E[attr^=val]属性选择器（Attribute selectors）a[data-url^='http']匹配所有 data-url 属性以 http 开头的 <a> 元素3E[attr$=val]属性选择器（Attribute selectors）a[data-url$='http']匹配所有 data-url 属性以 http 结尾的 <a> 元素3E[attr*=val]属性选择器（Attribute selectors）a[data-url*='http']匹配所有 data-url 属性包含 http 的 <a> 元素3E F后代选择器（Descendant selectors）p p匹配所有 <p> 元素下所有 <p> 元素1E > F子选择器（Child selectors）p p匹配所有 <p> 元素下所有子 <p> 元素2.1E + F相邻兄弟选择器label + input匹配所有 <label> 元素同级的第一个 <input> 元素2.1E ~ F兄弟选择器label ~ input匹配所有 <label> 元素同级的所有 <input> 元素3S1,S2,.....选择器分组label,input匹配所有 <label>,<input> 元素1

伪类和伪元素

??伪类（Pseudo-classes）用于指定选择器的某种特定状态或条件，伪类在 DOM 中并不存在，但对用户却是可见的。

动态伪类（Dynamic pseudo-classes）

??动态伪类对除了其名称、属性或内容之外的特性的元素进行分类，不会显示在文档源或文树中。

选择器实 例描 述版 本:linka:link匹配未被访问的链接1:visiteda:visited匹配被访问过的链接1:hovera:hover匹配鼠标指针在其浮动的元素1:activea:active匹配鼠标指针在其上按下的元素1:focusinput:focus匹配获得焦点的元素2.1

目标伪类（The target pseudo-classes）

??目标伪类指定当前活动的锚，使用目标伪类可以为活动的锚设置样式。

选择器实 例描 述版 本:target#tab1:target匹配活动的锚3

语言伪类（The language pseudo-classes）

??语言伪类向带有指定 lang 属性元素添加样式。

选择器实 例描 述版 本:lang(val)#p:lang(en)匹配带有指定 lange="en" 的 <p> 元素3

UI元素状态伪类（The UI element states pseudo-classes）

??UI元素状态伪类主要用于指定表单中的元素状态。

选择器实 例描 述版 本:enabledinput:enabled匹配启动的元素3:disabledinput:disabled匹配禁用的元素3:checkedinput:checked匹配被选中的元素3

display 和 visibility 属性对于UI元素状态伪类匹配 enabled/disabled 状态没有影响。

结构性伪类（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

在 CSS 1 和 CSS 2 中，伪类选择器中只有一个 ":"，而 CSS 3 变为两个 "::"，是为了区分伪类与伪元素，目前这两个写法效果一致。

::before 与 ::after 必须设置 content 属性，否则元素不能生效。

优先级和权重

?? CSS 中的权重分别为 4 个等级：

• 内联样式（HTML 文档中的 style 属性）

• ID 选择器

• 类、伪类、属性选择器

• 元素、伪类元素

这 4 个等级由高到低代表不同的优先级，!important 写在 CSS 规则后，可以将对应的规则提升到最高权重。

相关推荐：

css选择器实例分享

CSS选择器的新用法详解

CSS选择器字段解析的实现方法

以上就是CSS选择器的优先级和权重分析的详细内容，更多请关注php中文网其它相关文章！