Question

这段代码并不像我期望的那样工作：

＆＃13;

div li span:first-child {
  font-weight: bold;
}

＆＃13;

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
  </ul>
</div>

＆＃13;

两个span元素都是粗体。我原本期望第二个不是粗体，因为它遵循明文"And "，但我想:first-child并不认为文本内容是孩子。

有没有办法区分这两种情况，并选择没有任何内容或兄弟姐妹的元素？

澄清：在我的具体情况中，我想在每个<span>元素中加上<li>元素加粗，但前提是它正好在<li>的开头，不包含任何文字或其他元素。

Answer 1

据我所知，不，你不能单独使用CSS来区分有或没有兄弟文本节点的元素：

div li span:first-child {
  font-style: italic;
}

div li:first-child span {
  font-weight: bold;
}

div li:empty span:first-child {
  color:red;
}

div li span:only-child {
  font-size: 20px;
}

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
    <li><span>another test</span></li>
  </ul>
</div>

Answer 2

您的代码会将样式应用于作为其父级的第一个子级的任何span元素。在这两种情况下，您的span是其父li的第一个孩子。

在这种情况下，您不想要第一个孩子span，您想要第一个孩子li。

div li:first-child span {
  font-weight: bold;
}

编辑：我似乎误解了你的问题，因为它更多地涉及为什么第二个跨度是粗体，尽管前面是文本。正如您所假设的那样，文本不被视为子元素，因为文本节点在技术上是其父li的一部分。您的代码将适用于已定义的DOM兄弟姐妹，例如其他<div>或<span>，但我不确定是否有足够的方式来说明＆＃34;如果先前通过任何文字＆＃34; 而不实施javascript。

Answer 3

如果不是它的父母下面的第一件事，那么不要定位跨度，只需将And换行如下：

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li><div style="display: inline: ">And</div> <span>this is also a test</span></li>
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  </ul>
</div>

Answer 4

您只需要稍微扭曲代码：

div li:first-child  span{
  font-weight: bold;
}

如何使用CSS first-child但不包括文本内容

4 个答案: