css选择器规则

1. 选择器分类

简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。
属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。

2. 简单选择器

类型选择器（又名元素选择器）: 选择器名和指定的HTML元素名的不区分大小写的匹配。

元素名 {属性名:属性值;}
复制代码

类选择器: 由一个点“.”以及类后面的类名组成。

.类名 {属性名:属性值;}
复制代码

ID 选择器: 由哈希/磅符号 (#)组成，后面是给定元素的ID名称( ID 名称具有唯一性)。

#ID名 {属性名:属性值;}
复制代码

通用选择器: （*）星号，表示选择页面所有元素。

* {属性名:属性值;}
复制代码

3. 属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的 属性和属性值来匹配元素。
通用语法: [属性名:属性值]
分类: 存在和值属性选择器 和 子串值属性选择器。

3.1 存在和值（Presence and value）属性选择器

这些属性选择器尝试匹配精确的属性值：

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
复制代码

3.2 子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（-用来处理语言编码）。
[attr^=val] : 选择attr属性的值以val开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。
复制代码

4. 伪选择器

伪选择器 —— 这些不选择实际元素，而是元素的某些部分，或仅在某些上下文中的元素。它们有两种主要类型 - 伪类和伪元素。

4.1 伪类（Pseudo-class）

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。
语法：selector:pseudo-class { property: value; }
例如：a:visited {} a:hover {} a:active {} a:focus {}

4.2 伪元素

pseudo classes (伪类)一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。
语法 :selector::pseudo-element { property: value; }
所有伪元素：

::after                 元素的最后一个子元素
::before                元素的第一个子元素
::first-letter  （块级元素）第一行的第一个字母
::first-line      （块级元素）的第一行
::selection        用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
复制代码

5. 组合器和多个选择器

5.1 组合器

5.2 同一规则集上的多个选择器

语法 selector1,selector2 {property:value;}

6. CSS3中的一些选择器

6.1 CSS3 同级元素通用选择器

6.2 CSS3 属性选择器

6.3 CSS 3中与用户界面有关的伪类

6.4 CSS 3中的结构性伪类

7. 参考链接

• https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors
• http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

转载于:https://juejin.im/post/5ae966ddf265da0b826298df