这是我参与「第四届青训营 」笔记创作活动的第 3 天。（第三篇笔记）
这篇在是前面学习 CSS 课程基础的上自我拓展出来的笔记内容，主要顺带回顾一下我之前在学习 CSS 中记录的有关于 CSS 选择器相关的内容，比较详细地介绍了各种不同的 CSS 的选择器的使用方法和理解。（由于本站不支持嵌入元素，所以还是建议转到 🎮 CSS 选择器 | notebook (simon1uo.github.io) 结合其中的 codepen 例子查看学习）
通配选择器
通配选择器指的是使用*，选中 HTML 页面中所有的元素，将样式应用到所有的元素：
* { /* example style */}
元素选择器
元素选择器又可以看做类型、标签选择器，根据标签名来选中指定的元素：
p { /* 样式应用于所有的p标签 */}
h1{ /* 样式应用于所有的h1标签 */}
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式（一般只使用一次）；
HTML 中元素使用 id 属性设置 id 选择器（），在 CSS 中 使用 # 来定义：
以下对应元素属性 id=“para1”
#para1
{
text-align:center;
color:red;
}
class 选择器
有别于id选择器，class 选择器用于描述一组元素的样式：
-
可以重复使用；
-
可以通过
class属性来为元素分组； -
可以同时为一个元素指定多个
class属性；
HTML 中元素使用 class 属性设置 id 选择器，在 CSS 中 使用 . 来定义：
<p class="center"> test para</p>
.center { text-align:center;}
🌰 例子 / 指定特定的 HTML 元素使用 class：
所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center{ text-align: center;}
⚠️命名问题注意：id 属性名称和 class 名称不能以数字开头；
属性选择器
可以根据元素的属性值选中一组元素：
- 语法1：
[属性名]选择含有指定属性的元素；
-
语法2：
[属性名=属性值]选择含有指定属性和属性值的元素； -
语法3：
[属性名^=属性值]选择属性值以指定值开头的元素； -
语法4：
[属性名$=属性值]选择属性值以指定值结尾的元素； -
语法5：
[属性名*=属性值]选择属性值中含有某值的元素；
🌰 例子：
p[title]
{
color: orange;
}
p[title=e]
{
color: orange;
}
p[title^=e]
{
color: orange;
}
p[title$=e]
{
color: orange;
}
p[title*=e]
{
color: orange;
}
复合选择器
交集选择器：可同时复合多个条件的元素；
-
语法：
元素选择器选择器1选择器2 { }； -
注意：如果有元素选择器，必须元素选择器为开头；
🌰 例子：
<div> ...</div><div class="red"> </div>
div.red{ font-size: 30px;}
.a.b.c{ color: blue;}
并集选择器：同时选择多个选择器对应的元素；
- 语法：使用
,隔开：选择器1,选择器2,选择器3,选择器n { }；
🌰 例子：
<h1> ... </h1><span> ... </span>
h1,span{ color: green;}
关系选择器
子元素选择器 Child Combinator：选中指定父元素的指定子元素；（直接被父元素包含的元素是子元素）
- 语法：
父元素 > 子元素；
后代元素选择器 Descendant Combinator：选中指定元素内的指定后代元素；（直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素；）
- 语法：
祖先 后代；
兄弟元素选择器 Sibling combinator：选择兄弟元素（拥有相同父元素的元素是兄弟元素）
-
语法：
相邻兄弟选择器：
former_element + target_element { style properties }：元素之间必须相邻，选中后一个元素；通用兄弟选择器：位置无须紧邻，只须同层级，
A~B选择A元素之后所有同层级B元素：former_element ~ target_element { style properties }
伪类选择器
伪类：不存在的类，特殊的类。使用于描述元素的特殊状态，如：第一个子元素、被点击的元素、鼠标移入的元素.…；伪类一般情况下都是使用:开头：
根据子元素排序：
:first-child第一个子元素:last-child最后一个子元素:nth-child()选中第 n 个子元素:n：第 n 个，n 的范围 0 到正无穷:2n或:even：选中偶数位的元素:2n+1或:odd：选中奇数位的元素
根据同类型元素排序：
:first-of-type同类型中的第一个子元素:last-of-type同类型中的最后一个子元素:nth-of-type()选中同类型中的第 n 个子元素
特殊伪类：
:not()否定伪类，将符合条件的元素从选择器中去除；:link未访问的链接:visited已访问的链接（由于隐私的原因，所以visited这个伪类只能修改链接的颜色）:hover鼠标悬停的链接:active鼠标点击的链接
更多伪类选择器：伪类 - CSS（层叠样式表） | MDN (mozilla.org)
伪元素选择器
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）；伪元素使用::开头；
- 必须结合
content元素使用：::before元素的开始::after元素的最后::first-letter表示第一个字母::first-line表示第一行::selection表示选中的内容
总结
本篇笔记介绍了 CSS 中的各种选择器，这里推荐一个 🎮 复习用的游戏：CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io) ，加深理解。
