html - 如何将样式应用于 div 的外部子项？

Question

我有以下代码:

<div class="citation">
  <span>some text 
        <span id="innerSpan">inner text</span>
        some more text
  </span>
</div>

我试图影响带有 citation 类的 div 的外部跨度，但不影响内部跨度:

.citation {
   color:red;
}

.citation span {
   color: yellow
}

我试过 :first-of-type、:nth-child，但似乎没有任何效果。

Answer 1

通过选择第一个内部跨度，您将选择嵌套跨度。这使得在 CSS 中很难(或不可能)设置外部 span 的样式，但让 inner span 从第二个父级继承。

一个解决方案是将相同的样式应用于 .citation 和 #innerSpan，并将不同的样式应用于第一个 span 子级，像这样:

.citation,
#innerSpan {
  color: red;
}

/* or you could use 
/
/  .citation,
/  .citation > span > span {
/    color: red;
/  }
/
*/

.citation > span {
  color: yellow;
}

<div class="citation">
  <span>some text 
        <span id="innerSpan">inner text</span> some more text
  </span>
</div>

选项 2

绝对不理想，但一些 JavaScript 就可以解决问题，如下所示:

var inners = Array.from(document.querySelectorAll('.citation > span > span'));

inners.forEach(inner => {
  inner.style.color = window.getComputedStyle(inner.parentNode.parentNode).color;
});

.citation {
  color: red;
}

.citation > span {
  color: yellow;
}

<div class="citation">
  <span>some text 
        <span id="innerSpan">inner text</span> some more text
  </span>
</div>