CSS教程
CSS选择器 1
3 选择器
所谓选择器，指的是选择施加样式目标的方式。
3.1 元素选择器
用标签名作为选择器，选中所有相应的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-size:24px;
color: red;
}
p{
font-size: 32px;
color:blue;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
</html>
3.2 id选择器
顾名思义，是根据id来选择元素，其样式定义形式为：
#idname{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
显示结果为
3.3 类选择器
根据class属性来选择元素，其样式定义形式为：
.className{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.even {
width: 200px;
height: 200px;
}
.odd {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
显示结果为：
从结果可以看出: .odd{……}定义的样式会施加到所有class="odd"的元素上，比如上例中的第一个和第三个<div>，当然也包括class="odd"的<p>。
-
CSS-Module学习：轻松入门与实战技巧10-01
-
CSS6教程：初学者必备指南09-29
-
CSS定位教程：入门与实战指南09-29
-
CSS浮动教程：掌握网页布局的基础技巧09-29
-
CSS选择器教程：初学者必备指南09-29
-
CSS样式教程：初学者必备指南09-29
-
CSS 中的黄金比例09-27
-
CSS大厂面试真题详解及备考指南09-25
-
深入浅出TailwindCSS开发：快速上手与实战技巧09-10
-
尾风CSS开发：快速上手与实战指南09-10
-
从零开始：深入TailwindCSS项目实战，快速上手构建高效网站09-10
-
尾风CSS项目实战：初级用户快速上手指南09-10
-
TailwindCSS从入门到实践：全面指南09-07
-
Tailwind.css入门：快速上手指南09-05
-
CSS9资料：入门级CSS教程与实用技巧指南08-29
