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
}

我尝试过：第一个类型，：nth-child，但似乎没什么用。

Answer 1

通过选择第一个内部跨度，您将选择嵌套跨度。这使得CSS很难（或不可能）设置外部span的样式，但是inner span继承自第二个父项。

一种解决方案是将相同的样式应用于.citation和#innerSpan，并将样式应用于第一个span子项，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

选项2

绝对不理想，但有点JavaScript可以解决这个问题：

＆＃13;

var inners = Array.from(document.querySelectorAll('.citation > span > span'));

inners.forEach(inner => {
  inner.style.color = window.getComputedStyle(inner.parentNode.parentNode).color;
});

＆＃13;

.citation {
  color: red;
}

.citation > span {
  color: yellow;
}

＆＃13;

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

＆＃13;

Answer 2

您可以像这样使用子选择器>：

.citation {
   color: red;
}

.citation > span {
   color: yellow
}

现在只选择直接子元素。 >选择器只在标记结构中查找一个级别。

看看这里： https://css-tricks.com/child-and-sibling-selectors/

Answer 3

颜色由儿童继承，您需要重置

.citation {
   color:red;
}

.citation > span {
   color: yellow
}
.citation > span span {
   color: initial; /* or any color you choose */
}

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

对于infos

代码段使用初始值：https://developer.mozilla.org/en-US/docs/Web/CSS/initial

initial CSS关键字将属性的初始值应用于元素。它可以应用于任何CSS属性，包括CSS简写全部。

如果您希望内部文字 与.citation 颜色相同，请将选择器添加到规则

.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>

Answer 4

.citation span span{
   color: yellow;
}

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

4 个答案:

选项2