css菜鸟之兄弟选择器

兄弟选择器：用来设置某个选择器兄弟元素的样式。一种是选择元素后面一个兄弟元素，用“+”号连接选择器，另一种是选择元素后面同一类指定的兄弟元素，用“～”连接选择器。

<template>

  <div>

    <div id="box1">
      <h2>
        +连接的选择器
      </h2>
      <p>这是一段话</p>
      <p>这是一段话</p>
      <h2>
        +连接的选择器
      </h2>
      <p>这是一段话</p>
      <p>这是一段话</p>
    </div>

    <div id="box2">
      <h2>
        ~连接的选择器
      </h2>
      <p>这是一段话</p>
      <p>这是一段话</p>
      <h2>
        +连接的选择器
      </h2>
      <p>这是一段话</p>
      <p>这是一段话</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "CssTest"
}
</script>

<style scoped>
#box1  h2+p {
  background-color: red;
}

#box2  h2~p {
  background-color: red;
}
</style>

效果图：