摘要：优先级和权重中的权重分别为个等级内联样式文档中的属性选择器类伪类属性选择器元素伪类元素这个等级由高到低代表不同的优先级，写在规则后，可以将对应的规则提升到最高权重。
以下总结内容摘自 《移动Web前端高效开发实战》基本选择器
伪类（Pseudo-classes）用于指定选择器的某种特定状态或条件，伪类在 DOM 中并不存在，但对用户却是可见的。
动态伪类（Dynamic pseudo-classes）动态伪类对除了其名称、属性或内容之外的特性的元素进行分类，不会显示在文档源或文树中。
| 选择器 | 实 例 | 描 述 | 版 本 |
|---|---|---|---|
| :link | a:link | 匹配未被访问的链接 | 1 |
| :visited | a:visited | 匹配被访问过的链接 | 1 |
| :hover | a:hover | 匹配鼠标指针在其浮动的元素 | 1 |
| :active | a:active | 匹配鼠标指针在其上按下的元素 | 1 |
| :focus | input:focus | 匹配获得焦点的元素 | 2.1 |
目标伪类指定当前活动的锚，使用目标伪类可以为活动的锚设置样式。
| 选择器 | 实 例 | 描 述 | 版 本 |
|---|---|---|---|
| :target | #tab1:target | 匹配活动的锚 | 3 |
语言伪类向带有指定 lang 属性元素添加样式。
| 选择器 | 实 例 | 描 述 | 版 本 |
|---|---|---|---|
| :lang(val) | #p:lang(en) | 匹配带有指定 lange="en" 的 元素 |
3 |
UI元素状态伪类主要用于指定表单中的元素状态。
| 选择器 | 实 例 | 描 述 | 版 本 |
|---|---|---|---|
| :enabled | input:enabled | 匹配启动的元素 | 3 |
| :disabled | input:disabled | 匹配禁用的元素 | 3 |
| :checked | input: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 规则后，可以将对应的规则提升到最高权重。
github 原文地址 欢迎 Star 和 Watch
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115734.html
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：内联样式外部样式选择器类型选择器栗子标签属性伪类伪元素相邻选择器子代选择器权重计算规则内联样式，如，权值为。选择器，如，权值为。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。通配符子选择器相邻选择器等的。 CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 h1{...
阅读 2736·2021-11-19 09:40
阅读 1404·2021-11-15 11:39
阅读 422·2021-10-08 10:05
阅读 2177·2021-09-03 10:29
阅读 3268·2021-08-12 13:22
阅读 1895·2019-08-30 15:54
阅读 3562·2019-08-30 14:03
阅读 2554·2019-08-30 13:45
