CSS之关系选择器、属性选择器、伪类选择器_怎么选择一个标签里面的子标签进行style更改

作者：Guff_9hys | 2024-07-07 15:49:27

踩

怎么选择一个标签里面的子标签进行style更改

在这里插入图片描述

CSS之关系选择器、属性选择器、伪类选择器

一、关系选择器
二、属性选择器
三、伪类选择器

一、关系选择器

后代选择器：只要是这个元素的后代，样式都会发生变化，div下面的所有h1标签样式都会改变
关系选择器：子代选择器，只改变子标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*后代选择器：只要是这个元素的后代，样式都会发生变化
        	div下面的所有h1标签样式都会改变*/
			div h1{
				color: gold;
			}
			/*关系选择器：子代选择器
                         只改变子标签的样式*/
			div>h1{
				color: royalblue;
			}
		</style>
	</head>
	<body>
		<div>
                        <h1>富强</h1>
                        <h1>民主</h1>
                        <h1>文明</h1>
                        <h1>和谐</h1>
                        <h1>自由</h1>
                        <span>
                                <h1>平等</h1>
                                <h1>公正</h1>
                                <h1>法制</h1>
                                <h1>爱国</h1>
                                <h1>敬业</h1>
                        </span>
                </div>
	</body>
</html>

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

二、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
                        /*属性选择器*/
                        input[type="password"]{
                                background-color: red;
                        }
                        input[type="text"][value="kb1"]{
                                background-color: yellow;
                        }
                        
                </style>
	</head>
	<body>
		<form>
                        用户名1：<input type="text" value="kb1" /><br />
                        用户名2：<input type="text" value="kb2" /><br />
                        密&emsp;码：<input type="password" value="123123" /><br />
                  <input type="submit" value="登录" />
                </form>
	</body>
</html>
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

效果展示
在这里插入图片描述

三、伪类选择器

一般伪类选择器都用在超链接上：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link{
				color: royalblue;
			}
			a:hover{
				color: black;
			}
		</style>
	</head>
	<body>
		<a href="index.html">超链接</a>
	</body>
</html>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/796156