《HTML+CSS+JavaScript》之第12章 CSS选择器

12.1 元素的id和class

元素的id和class属性可用来选择元素，进行CSS或JavaScript操作。

12.1.1 id属性

唯一性，同一页面同一id只有一个。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div id="content1">存在即合理</div>
    <p id="content2">存在即合理</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

12.1.2 class属性

相同class元素具有相同CSS样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div class="content">存在即合理</div>
    <p class="content">存在即合理</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

12.2 选择器是什么

用一种方式将想要的元素选中。

12.3 CSS选择器

选择器 {
	属性1：取值1；
	......
	属性n：取值n；
}
1
2
3
4
5

12.3.1 元素选择器

选中相同的元素。

div{width:100px;height:100px;}
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        div{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

12.3.2 id选择器

元素设置id属性，根据id进行选择。

#box{width:100px;height:100px;}
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #lvye{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <div id="lvye">绿叶学习网</div>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

12.3.3 class选择器

元素设置class属性，根据class进行选择。

.box{width:100px;height:100px;}
1

相同元素定义class

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .lv{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <div class="lv">绿叶学习网</div>
    <div class="lv">绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

不同元素定义class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .lv{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <p class="lv">绿叶学习网</p>
    <span class="lv">绿叶学习网</span>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

12.3.4 后代选择器

选择元素内部中所有同种元素，包括子代及孙代。

#father div{width:100px;height:100px;}
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father1 div {color:red;}
        #father2 span{color:blue;}
    </style>
</head>
<body>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p>绿叶学习网</p>
        <p>绿叶学习网</p>
        <span>绿叶学习网</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

12.3.5 群组选择器

同时选中多个元素。

h3,p{width:100px;height:100px;}
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #lvye,.lv,span{color:red;}
    </style>
</head>
<body>
    <div id="lvye">绿叶学习网</div>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <p class="lv">绿叶学习网</p>
    <span>绿叶学习网</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
PHP的四层架构
期货开户合约的规模和价值
Flink CDC - Postgres
第1章 Spring Boot到底是什么？
Redisson--最好用的Redis客户端--介绍
C语言动态内存管理malloc、calloc、realloc、free函数的讲解
狂奔的低代码，画风各异的阿里云、腾讯云
牛客网国庆赛day3
苹果Mac电脑L2TP连接公司内部网络失败解决方案
mycat2

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125611947