🎮 CSS 选择器
# 选择器
# 通配选择器
使用 * ，选中 HTML 页面中所有的元素，将样式应用到所有的元素：
* { /* example style */}
# 元素选择器
类型、标签选择器，根据标签名来选中指定的元素：
p { /* 样式应用于所有的p标签 */}
h1{ /* 样式应用于所有的h1标签 */}
2
# id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式（一般只使用一次）；
HTML 中元素使用 id 属性设置 id 选择器，在 CSS 中 使用 # 来定义：
以下对应元素属性 id=“para1”
#para1
{
text-align:center;
color:red;
}
2
3
4
5
# class 选择器
有别于 id 选择器，cclass 选择器用于描述一组元素的样式：
可以重复使用；
可以通过
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;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 复合选择器
交集选择器：可同时复合多个条件的元素；
语法：
元素选择器选择器1选择器2 { }；注意：如果有元素选择器，必须元素选择器为开头；
🌰：
<div> ...</div><div class="red"> </div>
div.red{ font-size: 30px;}
.a.b.c{ color: blue;}
2
并集选择器：同时选择多个选择器对应的元素；
语法：使用
,隔开：选择器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鼠标点击的链接
🌰：例子：
# 伪元素选择器
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）；伪元素使用 :: 开头；
必须结合
content元素使用：
::before元素的开始::after元素的最后
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
⭐️🎮 选择器复习用游戏：CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io) (opens new window)