HTML5基础——7、CSS选择器

CSS选择器详解

原创已于 2025-10-18 07:53:11 修改 · 1.9k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #选择器

于 2025-10-16 10:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

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