抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

css选择器用于选取要设置样式的HTML元素。

基础选择器

id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>

<p id="para1">胖虎同学</p>
<p>www.wangyouwu.cn</p>

</body>
</html>

表现:

image-20210401163324189

元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style>
h1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>胖虎同学</h1>
<p>只有h1才会变红</p>
</body>
</html>

表现:

image-20210401165505363

类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style>
.center {
background: green;
}
</style>
</head>
<body>
<h1 class="center">我被绿了</h1>
<p>你被绿了。</p>
</body>
</html>

表现:

image-20210401170221921

tips

image-20210401185453268

组合器选择器

后代选择器(空格)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

</body>
</html>

表现:

image-20210402163857173

子选择器(>)

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
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>

<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
<p>div 中的段落 4。</p>
</div>

<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>

</body>
</html>

表现:

image-20210402164233703

相邻兄弟选择器(+)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器(+)选择所有作为指定元素的相邻的同级元素。</p>

<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

表现:

image-20210402164426529

通用兄弟选择器(~)

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
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器(~)选择指定元素的所有同级元素。</p>

<p>段落 1。</p>

<div>
<p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

</body>
</html>

表现:

image-20210402164610520

Tips

image-20210402164735344

除此之外,还有伪类选择器(根据特定状态选取元素)、伪元素选择器(根据元素的一部分并设置其样式)、属性选择器(根据属性或属性值来选取元素)。随着以后遇到再深入学习。

评论