当前位置：首页 > news >正文

HTML5基础——7、CSS选择器

news 2025/10/18 15:38:16

大家好，我是阿赵。继续学习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>