css组合选择器

在目前的 css 里，有以下几种组合选择器：

1.   （空格）后代们选择器（所有的后代）
2. > 儿子们选择器（所有的儿子）
3. ~ 弟弟们选择器（所有的弟弟）
4. + 首弟选择器（第一个弟弟）
5. || 列选择器（目前几乎没什么浏览器支持）

接下来，展开一个一个的讲解

1.  （空格）后代们选择器（所有的后代）

选择所有的后代，数量不限 直接来看例子：

/* 选中div里所有的p */
div p {
  color: red;
}
/* div和p之间有一个空格，你写多个空格也行 */
div      p {
  background: yellow;
}

<div>
  <p>p1，父元素是div</p>
  <span>
    <p>p2，爷元素是div</p>
  </span>
  <span>
    <h5>
      <span>
        <article>
          <p>p3,虽和div相距很多层，但依然是div的后代</p>
        </article>
      </span>
    </h5>
  </span>
</div>

效果预览

2. > 儿子们选择器（所有的儿子）

不选孙子，也不选后代，只选儿子，数量不限

/* 选中所有父元素是div的p元素 */
div > p {
  color: red;
}
/* > 前后 多出的空格不影响渲染结果 */
div   >   p {
  background: yellow;
}

<div>
  <p>p1，父元素是div</p>
  <span>
    <p>p2，爷元素是div</p>
  </span>
  <span>
    <h5>
      <span>
        <div>
          <p>p3,仔细看，我的父元素也是div</p>
        </div>
      </span>
    </h5>
  </span>
</div>

效果预览

3. ~ 弟弟们选择器（所有的弟弟）

只要是我弟，不管是二弟，还是三弟，还是第 100 个弟弟，都会被选中，数量不限

/* 选中p的所有p弟弟 */
p ~ p {
  color: red;
}

/* 选中p的所有div弟弟 */
p ~ div {
  color: blue;
}

<div>
  <div>div1，我是div的大儿子</div>
  <p>p1，我上面的哥哥是div1</p>
  <p>p2，p1是我哥</p>
  <p>p3，p1,p2都是我哥</p>
  <span>
    <div>div2，我是span的大儿子</div>
    <p>p4，div2是我哥</p>
    <div>div3，div2,p4都是我哥</div>
    <div>div4，div2,p4,div3都是我哥</div>
    <p>p2，div2,p4,div3,div4都是我哥，注意：p4是我哥</p>
  </span>
</div>

效果预览

4. + 首弟选择器（第一个弟弟）

不管我在家中排行老几，不管我有多少个哥哥弟弟，只选中出生在我之后的第一个弟弟

/* 选中p的第一个p弟弟 */
p + p {
  color: red;
}

/* 选中p的第一个div弟弟 */
p + div {
  color: blue;
}

    <div>
        <p>p1</p>
        <p>p2，p1是我哥,我是它第一个弟弟</p>
        <p>p3，p1是我哥,我是它第二个弟弟；注意：我是p2的第一个弟弟</p>
        <p>p4，p1,p2是我哥,我是它们的二弟,三弟；注意：我是p3的第一个弟弟</p>
        <span>
            <p>p-a1</p>
            <div>div2，p-a1是我哥,我是它第一个弟弟</div>
            <div>div3，p-a1是我哥,我是它第二个弟弟</div>
        </span>
    </div>

效果预览

5. || 列选择器（目前几乎没什么浏览器支持）

目前几乎没什么浏览器支持，目前我也不会，等我学会了再来讲解