★文章内容学习来源：拉勾教育大前端就业集训营

二、兄弟选择器

接上篇【34】CSS3（1）—— 新增选择器①子级选择器
本篇讲解css3新增的第二种选择器：兄弟选择器

1.介绍

类别 语法 具体适用
相邻兄弟选择器 element1+element2 匹配同一个父元素中紧跟在element1后面的一个element2元素
其他兄弟选择器 element1~element2 匹配同一个父元素中在element1后面的所有element2元素

2. 相邻兄弟选择器

  • 适用情况：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
  • 书写语法：element1 + element2
  • 注意：
    a）选中的是紧跟在 E1 之后的同级元素 E2。
    b）只能选中紧跟在后面的一个 E2 元素。
    c） 二者有相同的父元素。
    d）+ 符号前后可以添加空格书写。

3.其他兄弟选择器

  • 适用情况：其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
  • 书写语法：element1 ~ element2
  • 注意：
    a）选择 element1 之后出现的所有 element2 。
    b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
    c）~ 符号前后可以添加空格书写。

4.举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>举例：兄弟选择器</title>
  <style> /* 相邻兄弟选择器 */ .box1 h2 + p {
     /*没有紧跟的p标签，所以没有选中任何元素*/ background-color: pink; } p + p {
     /*p标签后紧跟着的一个p标签，所以除了第一个都会被选中*/ color: red; } /* 其他兄弟选择器 */ .box2 h2 ~ p {
     /*.box2中的h2标签后的，也是.box2的子级元素的，不必紧跟h2标签的，所有p标签都被选中*/ background-color: yellowgreen; } </style>
</head>
<body>
  <div class="box1">
    <h2>二级标题</h2>
    <div>内容</div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
  </div>
  <div class="box2">
    <p>段落0</p>
    <h2>二级标题</h2>
    <div>内容
      <p>内容中的p标签</p>
    </div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
  </div>
</body>
</html>

下篇继续：【36】CSS3（1）—— 新增选择器③结构伪类选择器