这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战”
- css 的选择器划分有如下几种
- 1 简单选择器
- 2 复合选择器
- 3 复杂选择器
其中复合选择器和复杂选择器都是由简单选择器组合而成，这可以借助一些连接符完成。
简单选择器
css 选择器最底层的结构，组成了简单选择器，简单选择器可以分为以下几种类型：
-
1 通配符*，*选择器可以命中所有的 html 元素
-
2 标签选择器（Type），命中如 div、span、p 等 html 元素标签
-
3 id 选择器，以#号开头，如 #abc 命中 html 中元素属性名为“id”，属性值为“abc”的元素
-
4 类选择器（也叫 class 选择器），如 .abc 命中 html 中元素属性名为“class”，属性值为“abc”的元素
-
5 属性选择器,使用“[]” 中括号包裹的内容，属性选择器一般与其他选择器一起使用作为补充，如 div[id],命中的是所有带有 id 属性的 div 元素，div[id=“abc”]命中 id 属性值为 abc 的 div 元素
-
6 伪类选择器，与其他的选择器组合使用，用来表示该元素的某种状态，如 div:hover，表示当 div 元素被鼠标悬浮时的样式，常见的伪类还有 :active、:link、:focus 等等
-
7 伪元素选择器，伪元素顾名思义即为不真实的元素，需要配合其他选择器一起使用，单独使用没有意义，如 div[class="abc"]::after,用来在命中属性 class 的 div 元素之后生成一个新的元素，主要的伪元素选择器有 ::before、::after、::first-letter、::first-line
简单选择器的表现形式如下：
*
div svg|a
#id
.cls
[attr=value]
:hover
::before
复合选择器
通过简单选择器的不间断连写，可以组成复合选择器，它的产生式可以表述为：
<复合选择器> = <简单选择器><简单选择器><简单选择器><简单选择器><简单选择器>
如果组成复合选择器的简单选择器中有标签选择器，则必须要让标签选择器置于最前方的位置，伪类和伪元素需要放在最后面。
复合选择器的表现形式如下：
div.abc[class="123"]
复杂选择器
复杂选择器是利用复合选择器和一些连接符来组成，它的产生式可以表述为：
<复杂选择器> = <复合选择器> [ "space" | ">" | "~" | "+" | "||"] <复合选择器>
其中 space 的意思是空格，即两个复合选择器之间可以通过空格进行分割。 举例说明
下面通过几个案例说明几种连接符的含义。
div .cls 本例演示空格的作用，该选择器的含义是选择 div 元素下的所有带有 cls 的 class 属性的子孙元素
<div>
<div class="cls">
<a class="cls"></a>
</div>
</div>
如上可以选择命中 div 和 a 标签 div > .cls
本例演示">"的作用，该选择器的含义是选择 div 元素下的所有带有 cls 的 class 属性的子元素,不包含孙元素
<div>
<div class="cls">
<a class="cls"></a>
</div>
</div>
如上可以选择命中 div 而不能选中 a div ~ .cls
本例演示"~"的作用，该选择器的含义是选择与 div 元素同级的并且在 div 元素之后 class 属性值为 cls 的元素
<div>
<div class="cls">
<a class="cls" id="1"></a>
</div>
<a class="cls" id="2"></a>
<span class="cls" id="3"></span>
</div>
如上可以选择命中 id 为 2 的 a 和 id 为 3 的 span 而不能选中 id 为 1 的 a div + .cls 本例演示"+"的作用，该选择器的含义是选择与 div 元素同级的并与 div 相邻 class 属性值为 cls 的元素
<div>
<div class="cls">
<a class="cls" id="1"></a>
</div>
<a class="cls" id="2"></a>
<span class="cls" id="3"></span>
</div>
如上可以选择命中 id 为 2 的 a 而不能选中 id 为 3 的 span 和 id 为 1 的 a，不能选中 span 是因为不相邻，中间有间隔一个元素
|| （不重要）
为 Selector4 的语法，用来选中表格中的列，目前浏览器的实现支持较少，不推荐使用仅作为知识的补充
