通配选择器

在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同。

并不建议使用这个选择器，因为因为它是性能最低的一个CSS选择器。

*{font-size:18px}

//可以结合属性选择器处理一些特殊的标签
*[displayNone]{display:none}

元素选择器

CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素。

span{font-size:14px}

类选择器

在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

类选择器大概是我们在实际业务中用的最多的选择器

.active{color:red}

//可以结合元素选择器（比较常用的方式）
span.active{color:red}
//也可以这样写，是一样的效果
span[class="active"]{color:red}

//或者这样
.active.blueColor{color:blue}

//还可以再加上伪类
.active.blueColor:hover{color:pink}

ID 选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

#test{font-size:14px}

//元素选择器结合id选择器
span#test{color:red}

//结合属性选择器
span[id="test"]{color:red}

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

语法描述

[attr]
- 表示带有以 attr 命名的属性的元素。
[attr=value]
- 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]
- 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]
- 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value]
- 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value]
- 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr*=value]
- 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素

选择器列表

CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。


//我们可以通过它来初始化样式
body,p,h1,h2{margin:0}

//也可以多行分组
body,
p,
,h1{
    margin:0
}

后代选择器

后代组合器（通常用单个空格（）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

这也是我们常用的选择器尤其是在一些css预处理语言中（如：less，sass）


//选择body下所有的span
body span{color:red}
//选择span下所有的i标签
span i{color:pink}

//结合类选择器
span.active a{color:yellow}

直接子代选择器

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由后代选择器相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

//只选择body的直接子代为span的元素
body>span{color:red}

通用兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

//会选择与span同级但在span之后的所有a标签（不包括span标签）
span ~ a{color:red}

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

//会选择与span相邻的a标签
span+a{color:pink}

伪选择器（伪类）

这里的内容有点多，另开一章介绍吧

CSS 选择器参考手册（v1）