以 CSS 嵌套伪选择器结构中的最后一个孩子为目标答案

【问题标题】：Targeting the last-child in a CSS Nested Pseudo-selector structure以 CSS 嵌套伪选择器结构中的最后一个孩子为目标
【发布时间】：2018-07-31 07:04:11
【问题描述】：

目标： 仅定位特定 html 元素类型的最后一个“根”子元素并对其进行样式化，在同级根子元素类型具有嵌套相同类型子元素的结构中。

问题：所有嵌套的子级也会在根子级之外进行风格化。

示例： 鉴于以下较大结构的块，我只想定位“GOLD”跨度，它始终是父 div 中类型跨度的最后一个子级。

div span:last-child {
  color: gold;
}

<div>0

  <span>1
      <span>2
        <span>3
        </span>
      </span>
  </span>

  <br/>

  <span>a
      <span>b
        <span>c
        </span>
      </span>
  </span>

  <span>GOLD
  </span>

</div>

【问题讨论】：

标签： css-selectors

【解决方案1】：

在div之后添加>：

div>span:last-child {
  color: gold;
}

<div>0

  <span>1
      <span>2
        <span>3
        </span>
  </span>
  </span>

  <br/>

  <span>a
      <span>b
        <span>c
        </span>
  </span>
  </span>

  <span>GOLD
  </span>

</div>

【讨论】：