CSS 基础知识 选择器

CSS 选择器架构

CSS的选择器分类如下图，其中最最基本的就是基础选择器中的三种

• 元素选择器
• 类选择器
• id选择器
• 伪类选择器

元素的不同行为、状态，或逻辑。然后不同的选择器组合，基于不同的组合关系，产生了6种组合关系选择器。

通配选择器：*{}

针对所有HTML标签全部适用，选择器名 =星号*（通配符），一般只做初始化使用。
在 CSS3 中，星号 (*) 可以和命名空间组合使用，如 ns|*{}。

/* 通用选择器，针对所有标签 */
* {
	color: black;
	font-size: 15px;
}
1
2
3
4
5

元素/标签选择器：元素名{}

用元素名称作为选择器名称，如p、h1、div、img等几乎所有元素名，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性。

hr {
	margin: 32px 5px;
}
h1 {
	background-color: lightblue;
	text-indent: 0.5em;
}
1
2
3
4
5
6
7

类选择器：.类名{}

定义时前面见点.类名，在标签的属性 “class” 使用该样式。

/* 类名class选择器 */
.particle{
	font-size: 18px;
	font-family: 楷体;
}
.pindent{
	text-indent: 2em;
}
"particle pindent">一段文字内容-section
1
2
3
4
5
6
7
8
9

类选择器可以给所有需要的标签使用，可同时给多个标签使用，应用广泛。

类名不能以数字开头。
同一个标签也可以用多个类选择器，空格隔开。

id选择器：#id{}

用标签的 id 作为选择器名称，加井号 “#”，针对作用域内指定id的标签生效，所以只能使用一次。

• ID是标签的唯一标识，不能重复。如果重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个。
• ID不能以数字开头。

/* id选择器 */
#a1{
	color:blueviolet;
	font-size: 16px;
	text-decoration-line:underline ;
}
1
2
3
4
5
6

属性选择器：选择器[属性]{}

元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素。

这里的属性值匹配是大小写敏感的，结尾加上字符 i（li[title*= "a" i]），则会忽略大小写敏感。

	
"a">item1：a
	
"a b">item2：a b
	
"c a b">item2
	
"a-b" class="cli">item4：a-b
	
"abc" class="cli">item5：abc
	
"cab" class="cli">item6：cab
	
"cba" class="cli">item7：cba
	
"cbA1" class="cli">item8：cbA1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

伪类选择器

伪类是选择器的一种，它用于选择处于特定状态的元素。
比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮。和用户交互有关的伪类，也叫用户行为伪类，或叫做动态伪类，比如 :link、:active、:visited、:hover。

伪类的标志是开头为冒号：如 a:hover{}
1

"vtag">
	年龄：
	"number" value="13" id="t3" name="t3" min="1" max="10" required>
	"t3">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

"vtb" border="1">
	

		
姓名
		
分数
		
学号
	
	

		
张三
		
r1-2
		
r1-3
	
	

		
周伦
		
r2-2
		
r2-3
	
	

		
李子柒
		
r3-2
		
r3-3
	
	

		
王小二
		
r4-2
		
r4-3
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

伪元素选择器::

基于一些预定的规则，像一个新的元素一样的虚拟元素，如段落中的第一行。

伪元素用双冒号开头::如 p::first-line{}。
不过有早期版本的伪元素是单冒号开头的。

✏️ 可插入内容的 ::before 、::after 伪元素，是一组特别的伪元素，配合 content 属性，可用css插入（文本）内容（追加的内容不可选中），一般可用来插入图标字符，增强阅读）。

"vtag">
	
出必告，反必面，居有常，业无变。
	
湖畔大学的梁宁曾说过：「要找到那件能让你一直不厌其烦做下去的事，你不厌其烦的地方，就是你的天分所在。追随内心，做自己喜欢的事，时间久了，你就会成功。」


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

合并/并集选择器：逗号

多种基础选择器的合并组合，每一个选择器都有效，相当于大家共用一个样式设置，选择器名字用逗号,隔开。

例如：div, #su1, .user{...}

1
2
3
4
5
6
7
8
9

交集选择器：无符号

多个选择器拼接，中间无任何连接符（利用选择器本身的前缀分割），不能有空格，选择都同时满足的元素。

格式如：选择器1 选择器2… 选择器n

a.nav.left[href]{
	background-color: #0000ff;
}
.form-float a.nav{
	color: white;
}
1
2
3
4
5
6

后代选择器：空格

用空格分割，选择指定定元素子元素&符合选择器条件的所有后代元素。

可多个标签组合，从第一个选择器标签（父）的子元素开始，一直往下找，所有符合条件的后代，最后一个为目标元素。

父 后代1 后代2 … 后代n(递归后代n)

"f1">
	
"f2">子代
	
"f11">
			
孙代
			
"f111">
				
曾孙
			
	
	
"f2">
			
孙代2
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子代选择器：大于号>

用大于号 > 分割，查找指定元素的子元素 & 第一代元素中符合所有条件的元素。
不同于后代选择器，只在第一代中找。

父 > 后代1 > 后代2 >…> 后代 n

.f1>p{
	background-color: antiquewhite;
}
.f1>.f2>p{
	text-indent: 2em;
}
1
2
3
4
5
6

相邻兄弟选择器：加号+

用加号+分割，查找指定元素相邻 & 同级的下一个指定元素，二者有相同的父元素且相邻，中间不可间隔。

只向后找一个，要求有点多，好像使用场景并不多。

兄弟1+兄弟2+…+兄弟n(第一个兄弟n)

.fb2+.fb3{
	font-weight: bold;
}
.fb2+p+p{
	color: red;
}
1
2
3
4
5
6

"fb1">
	
"fb2">子代
	
"fb3">兄弟1
	
"fb4">兄弟3
	
"fb11">
		
孙代
		
"fb111">
			
曾孙
		
	
	
"fb2">兄弟3

1
2
3
4
5
6
7
8
9
10
11
12

普通兄弟选择器：波浪线~

用波浪线 ~ 分割，查找指定元素同级的所有指定元素，有相同的父元素，符合条件的都会被找出来。不同于相邻兄弟选择器，不用相邻，多个结果。

兄弟1~兄弟2~...~兄弟n(所有同级兄弟n)

.fb2~p{
	text-indent: 1em;
}
.fb2~.fb3~p{
	text-indent: 2em;
}
1
2
3
4
5
6