完整教程：HTML5基础——7、CSS选择器
2025-11-19 10:35 tlnshuju 阅读(18) 评论(0) 收藏 举报 大家好，我是阿赵。继续学习H5，这次来学习CSS的选择器。
CSS选择器是一个很重要的内容，决定了我们选择哪些网页元素进行风格调整。下面是CSS选择器的分类。
一、基础选择器
这种单一的选择器包含了：
1. 标签选择器
标签就是html标签了，比如之前的h1，或者div、span之类
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 10px;
padding: 5px;
border: 1px solid black;
width: 300px;
height: 100px;
background-color: #ccc;
}
span {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
}
</style>
</head> 运行效果：
2. 类选择器
可以给html的标签指定一个类(class)，然后根据类来做选择器，写法是：.类名
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.redBox {
width: 100px;
height: 100px;
background-color: red;
}
.blueBox {
width: 100px;
height: 100px;
background-color: blue;
}
.greenBox {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="redBox"></div>
<div class="blueBox"></div>
<div class="greenBox"></div>
</body>
</html>
<div class="redBox"></div> 这里给div指定了class=”redBox”，所以这个div就会使用.redBox的CSS样式了。
需要注意的是，同一个标签是可以 指定多个类的，不同的类可以实现不同的属性效果，比如上面的例子可以改成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
</body>
</html>这时候，box是指定了盒子的大小，而下面的red、blue和green只是指定了颜色，在给div指定class的时候，可以同时指定多个，并用空格分隔，比如：
<div class="box red"></div>这时候的效果，和之前的写法是完全一样的，但这样就会灵活很多，因为我可以通过指定box来绘制矩形，也可能实现别的形状的class。但颜色依然可以通用之前的几个颜色。
3. id选择器
除了通过class来指定，还可以通过id来指定选择器，写法是：#id
举例，刚才上面用class来指定盒子颜色的做法，可以改成用id做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
}
#box2 {
background-color: blue;
}
#box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</body>
</html> 这里的box1、box2、box3，指定给div作用id值，就会受到了上面的#box1、#box2和#box3的影响，这时候的效果是和用class来指定是一样的，但意义不一样。
class一般是一个类别的指定，而id一般是单个元素对象的指定。
4. 通配符选择器
所谓的通配符就是所有都一起改变的意思，用*号。比如我想改变整个页面所有标签的颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: blue;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html> 这时候，标题的字体大小不会变化，但颜色都改变了：
二、 复合选择器
复合选择器是由2个或者多个基础选择器组成
1、 后代选择器
先看例子
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div span {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<span>你好</span>
</div>
<span>你好</span>
</body> 运行效果：
在这个例子里面body中间由2个span标签，一个是在div里面的，一个是单独的。
而在style里面，指定了一个div span选择器，它的含义是，选择div下面包含的span，所以结果就是只有包含在div里面的span的样式发生了变化。
这个可以选择父元素里面的子元素的方式，就叫做后代选择器，或者说是包含选择器。
后代选择器是一个包含关系，只要父级里面有包含的子级，都会被选择到，比如：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.food a {
color: red;
}
</style>
</head>
<body>
<div class="food">
<a href="#">米饭</a>
<ul>
<li><a href="#">面条</a></li>
<li><a href="#">馒头</a></li>
</ul>
</div>
</body> 运行效果：
可以看到，类food下面的所有链接a都变了颜色。
2、 子选择器
如果把上面的例子改一下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.food>a {
color: red;
}
</style>
</head>
<body>
<div class="food">
<a href="#">米饭</a>
<ul>
<li><a href="#">面条</a></li>
<li><a href="#">馒头</a></li>
</ul>
</div>
</body> 运行效果
这次看到只有最上面一级的a变了颜色。.food>a这个选择器选择的只有类food的直属子级里面的a，而不是直属的a是不会被选择到。
3、 并集选择器
先看例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span,
li {
color: red;
}
</style>
</head>
<body>
<div class="food">
<span>米饭</span>
<ul>
<li>面条</li>
<li>馒头</li>
</ul>
</div>
<div>蛋糕</div>
</body> 运行效果：
可以看到，选择器是span,li，用逗号分开的span和li，所以结果是span和li都被选中了。用逗号分隔的，是同时选择的意思。
4、 伪类选择器
伪类选择器一般是某个内容的一些属性的指定，一般用:表示
(1) 子元素选择
例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child {
color: blue;
}
</style>
</head>
<body>
<div class="food">
<span>米饭</span>
<ul>
<li>面条1</li>
<li>馒头1</li>
</ul>
</div>
<div>蛋糕</div>
<ul>
<li>面条2</li>
<li>馒头2</li>
</ul>
</body> 运行效果：
可以看到，现在选择的是所有作为子级的li里面的第一个。选择器是li:first-child，代表的就是多个li里面的第一个。
(2) 链接伪类选择器
例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* //未访问的链接,把没有点击过的(访问过的)链接选出来 */
a:link {
color: blue;
}
/* //2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: red;
}
/* //3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: green;
}
/* // 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度</a>
</body> 链接伪类选择器是专门为超链接使用，代表超链接的各个状态下的样式。
(3) focus伪类选择器
例子
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
border: 2px solid orange;
outline: none;
color: orange;
}
</style>
</head>
<body>
<table>
<input type="text" value="请输入用户名">
</table>
</body> 运行效果：
focus选择器主要是给表单里面获得焦点的元素指定样式。
浙公网安备 33010602011771号