HTML + CSS 连载 | 09 - CSS 兄弟选择器与选择器组

一、CSS 常见选择器

属性选择器

当使用属性选择器定位元素时，首先要确定目标元素拥有的属性，使用 [attr] 来表示具有某个属性，使用 [attr=val] 表示元素的属性名和属性值，例如 [title] {color: red}、[title=box] {color: blue}。

在使用属性选择器时，我们也可以集合各种通配符来使用，比如：

[attr*=val]：表示属性值包含某一个值 val
[attr^=val]：表示属性值以 val 开头
[attr$=val]：表示属性值以 val 结尾
[attr|=val]：表示属性值等于val或者以val开头后面紧跟着连接符-
[attr~=val]：表示属性值包含某一个值 val
[attr*=val]：表示属性值包含val，如果有其他值必须以空格和val分格

HTML 复制代码

<!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>
    [title] {
      color: red;
    }

    [title=info] {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>我是div元素</div>
  <div title="info">包含title属性的div元素</div>
  <div title="name"></div>
</body>
</html>

使用了浏览器打开页面，效果如下：

开发中属性选择器的使用频率一般。

后代选择器

后代选择器可以选择所有元素的后代，包括直接和间接的，选择器之间通过空格分割；如.box p span {color: red}。

还有一种后代选择器用于选择直接子代，隔代的不会被选中，直接子代选择器中的多个选择器以 > 分隔；如 .box > p > span {color: red}。

HTML 复制代码

<!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>
    /* 后代选择器 */
    .home span {
      color: rebeccapurple;
      font-size: 30px;
    }

    /* 使用直接子代选择器选择 */
    .content > .desc > p > .content-item {
      color: aqua;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="home">
    <div class="box">
      <span class="home-item">我是三层嵌套的span元素</span>
    </div>
  </div>
  <div class="content">
    <div class="desc">
      <p><span class="content-item">我是四层嵌套的span元素</span></p>
    </div>
  </div>
  <!-- 不希望被选中的元素 -->
  <span>不要选中我</span>
  <div><span>不要选中我</span></div>
</body>
</html>

在浏览器中打开页面，可以看到后代选择器作用的效果：

在开发中，后代选择器的使用频率较高，需要理解和掌握。

兄弟选择器

兄弟选择器可以通过目标元素同级的其他元素的选择器选中，直接相邻的兄弟选择器使用 + 连接，例如 .box + div {color: red}，普遍兄弟选择器（选中多个）可以使用 ~ 连接，例如 .box ~ div {color: red}。

HTML 复制代码

<!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>
    .item + .info {
      color: red;
    }

    .item ~ div {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div> 我是div1 </div>
    <div class="item"> 我是div2 </div>
    <div class="info"> 我是div3 </div>
    <div> 我是div4 </div>
    <div> 我是div4 </div>
    <p>我是p元素</p>
  </div>
</body>
</html>

使用兄弟选择器可以直接选择相邻的一个或者多个元素，效果如下：

开发中兄弟选择器的使用频率一般。

二、选择器组

交集选择器

交集选择器可以定位到同时符合两个选择器的条件的元素，通常在开发中为了精确的选择某一个元素会使用交集选择器，交集选择器的两个选择器之间紧密相连，没有空格或者逗号隔开，如 div.box {color: red}

HTML 复制代码

<!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.box {
      color: blueviolet;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="box">我是div元素</div>
  <p class="box">我是p元素</p>
</body>
</html>

在浏览器中打开页面，效果如下：

并集选择器

并集选择器能定位到符合多个选择器中的一个选择器的元素，两个选择器以上，以逗号分割，在开发中共通常为了给多个元素设置相同的样式时会使用并集选择器，如 div, .box {color: red}。

HTML 复制代码

<!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, .box, p, span {
      color:aquamarine;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>我是div1</div>
  <div class="box">我是div2</div>
  <p>我是p元素</p>
  <span>我是span元素</span>
</body>
</html>

在浏览器中打开页面，效果如下：

通常会对一些语义化的元素进行样式重置时，会使用到并集选择器。