1. 基本选择器
1.1 元素选择器（elementname）
CSS 元素选择器(也称为类型选择器)通过 Node 节点名称匹配元素。
因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。
span {
background-color: DodgerBlue;
color: #ffffff;
}
1.2 类选择器（.classname）
根据元素的类属性中的内容匹配元素。
类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
.classy {
background-color: DodgerBlue;
}
1.3 ID 选择器（#idname）
选择器会根据该元素的 ID 属性中的内容匹配元素。
元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
#demo {
border: red 2px solid;
}
1.4 通配选择器（*）
在 CSS 中，一个星号(*)就是一个通配选择器。它可以匹配任意类型的 HTML 元素。
在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。
*[lang^='en'] {
color: green;
}
*.warning {
color: red;
}
*#main-content {
border: 1px solid blue;
}
在 CSS3 中,星号(*)可以和命名空间组合使用:
ns|*会匹配 ns 命名空间下的所有元素*|*会匹配所有命名空间下的所有元素|*会匹配所有没有命名空间的元素
注意：不推荐使用通配选择器,因为它是性能最低的一个 CSS 选择器。
1.5 属性选择器（[属性=值]）
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
-
[attr]表示带有以 attr 命名的属性的元素。
/* 存在 title 属性的 <a> 元素 */
a[title] {
color: purple;
}
-
[attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。
/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
color: green;
}
-
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~='logo'] {
padding: 2px;
}
-
[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
/* 将所有语言为中文的 <div> 元素的文本颜色设为红色，无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
div[lang|='zh'] {
color: red;
}
-
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
/* 以 "#" 开头的页面本地链接 */
a[href^='#'] {
background-color: gold;
}
-
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
/* 以 ".org" 结尾的链接 */
a[href$='.org'] {
color: red;
}
-
[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*='example'] {
font-size: 2em;
}
-
[attr operator value i]属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写。
/* 包含 "cAsE" 的链接，忽略大小写 */
a[href*='cAsE' i] {
color: pink;
}
-
[attr operator value s]在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写。
2. 组合选择器
2.1 相邻兄弟选择器(A + B)
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
/* 图片后面紧跟着的段落将被选中 */
img + p {
font-style: oblique;
}
2.2 通用兄弟选择器(A ~ B)
兄弟选择符，位置无须紧邻，只须同层级，A~B 选择 A 元素之后所有同层级 B 元素。
p ~ span {
color: red;
}
2.3 子选择器(A > B)
当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素。
div > span {
background-color: DodgerBlue;
}
2.4 后代组合器(A B)
通常用单个空格（ ）字符表示）组合了两个选择器，
如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父级，父级的父级，父级的父级的父级等）元素，则它们将被选择。
ul li {
margin: 2em;
}
3. 分组选择器
CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。
/* 选择所有 <span> 和 <div> 元素 */
span,
div {
border: red 2px solid;
}
3. 伪类选择器
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素，即指定要选择的元素的特殊状态。
例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
具体详见
4. 伪元素选择器
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
例如，p::first-line 匹配所有 <p> 元素的第一行。
具体详见
