老鬼的博客 来都来啦，那就随便看看吧~
css之选择器
发布于: 2020-08-10 更新于: 2020-08-11 分类于: Html 阅读次数: 

一：元素选择器

1
2
3
4
5
6
7
8
9
10
就是对要选择的标签进行修饰，如：

p{
	color:red;
}

span{
	font-size:20px;
}

二：id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
根据id进行选择，如html如下：

<p>123</p>
<p>456</p>
<p id="p3">789</p>

如果要选择第三个p标签，则可以写：

#p3{
	color:red;
}

id选择器的写法是井号+id的值，如：#p3。
id不可重复，要保持唯一性。

三：类选择器

1
2
3
4
5
6
7
8
9
10
11
12
根据class的值进行选择，语法是：. + class的值，多个class属性使用空格隔开，
如网页如下：

<p>123</p>
<p>456</p>
<p class="red">123</p>
<p class="red">456</p>

.red{
	color:red;
}

四：通配选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.
在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,
*.warning 和.warning 的效果完全相同.

css:

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

html:

<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

五：交集选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
交集选择器是多个选择器的交集，交集选择器中如果有元素选择器（标签选择器）则
必须使用元素选择器作为开头，如：
正确写法：
p.red{
	font-size:10px;
}
错误写法：
.redp{
	font-size:10px;
}
道理很简单，因为元素选择器没有标识符，如果放在后面，如：.redp则会被解析成
class属性为redp的font-size设置成10px;

语法是：多个选择器直接相连写在一起，中间没有任何分隔。

六：并集选择器

1
2
3
4
5
6
7
8
9
10
并集选择器是多个选择器同时选中，语法是：选择器1,选择器2中间用逗号分隔，
如：
h1,span{
	color:red;
}

.red,#p3{
	color:red;
}

七：关系选择器（父子/兄弟选择器）

7.1 分类

1
2
3
4
5
6
7
8
9
10
11
12
父元素：
	- 直接包含子元素的元素
子元素：
	- 直接被父元素包含的元素
祖先元素：
	- 直接或者间接包含后代元素的元素
	- 一个元素的父元素也是其祖先元素
后代元素：
	- 直接或者间接被祖先元素包含的元素
	- 子元素也是后代元素
兄弟元素：
	- 拥有相同父元素的元素

7.2 子元素选择器

1
2
3
4
选中指定父元素的子元素，语法是：父元素 > 子元素，如：要选中div中的span，
div > span {
	color:red;
}

7.2 后代元素选择器

1
2
3
4
5
选中指定元素的后代元素，语法是：祖先元素 后代元素，注意中间有个空格，如：
div span{
	color:red;
}
就是选择了div中的所有的span元素。

7.3 兄弟选择器

7.3.1 选择下面一个兄弟元素
1
2
3
4
5
语法是：前一个+后一个，如：
div+span{
	color:red;
}
选择div的下一个兄弟元素span，也就是紧挨着div的兄弟元素。
7.3.2 选择下面所有的兄弟元素
1
2
3
4
5
语法是：前~后，如：
div~span{
	color:red;
}
选择div的所有的兄弟元素span。

八：属性选择器

1
2
3
4
5
6
是针对标签的属性进行选择的，语法是：
[属性名]:表示选择含有指定属性的元素，如：[title]
[属性名=属性值]:选择含有指定属性和属性值的元素，如：[title=abc]
[属性名^=属性值]:选择属性值以指定值开头的元素，如：[title^abc]
[属性名$=属性值]:选择属性值以指定值结尾的元素，如：[title$=abc]
[属性名*=属性值]:选择属性值中含有某值的元素，如：[title*=abc]

九：伪类选择器

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
伪类其实就是不存在的类，特殊的类，用来描述一个元素的特殊状态，
比如：第一个子元素，被点击的元素，鼠标移入的元素...

伪类一般使用:开头，如： 

: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
以上几个伪类和first-child，last-child，nth-child功能类似，唯一的
区别就是他们是在同类型元素进行排序的，要么全是li，要么全是span等。

案例：

ul > li:first-child{
	color:red;
}

ul > li:nth-child(0){
	color:red;
}

ul > li:nth-child(2n){
	color:red;
}


:not()
	- 否定伪类，将符合条件的元素从选择器中移除。
	
如： ul > li:not(nth-child(3)){
		color:red;
	 }
除了ul中的第三个元素其他全部是红色。


超链接的伪类：

1.超链接的状态
	- 未被点击的状态
	- 已被点击的状态
	- 鼠标移入的状态
	- 被点击时的状态
	
2.对应的伪类
	:link
		- 表示未被点击的链接
	:visited
		- 表示已经被点击的链接,由于隐私原因，只能修改链接的颜色
	:hover
		- 表示鼠标移入的状态，这个不是超链接的专有伪类，针对所有的元素都可
	:active
		- 表示被点击时的状态，这个不是超链接的专有伪类，针对所有的元素都可


十：伪元素

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
伪元素表示页面中一些特殊的并不是真实存在的元素（特殊的位置），

::first-letter
	- 表示第一个字母，如：p::first-letter
::first-line
	- 表示第一行元素，如：p::first-line
::selection
	- 表示选中的内容，如：p::selection
::before
	- 表示元素的开始位置
::after
	- 表示元素的最后
	
before和after必须结合content属性来使用。如：

div::before{
	content:'123';
	color:red;
}

div::after{
	content:'456';
	color:green;
}

餐厅在线选择器练习

*************感谢您的阅读*************