第一个孩子的 CSS 选择器，如果它恰好是类型答案

【问题标题】：CSS selector for first child, if it happens to be of type第一个孩子的 CSS 选择器，如果它恰好是类型
【发布时间】：2022-01-21 08:02:52
【问题描述】：

我有一些这样的 HTML：

<li>
  Very
  <span class="node-variable">high</span>
  temperature
</li>

和

<li>
  <span class="node-variable">high</span>
  temperature
</li>

在第二个版本中，我想将high 大写，所以它读作High。我不想大写第一个实例。

所以我想：

Very high temperature 和 High temperature

我的想法是应用一些 CSS 来选择 .node-variable，它是第一个孩子，但如果不是，则不是。这可能吗？

【问题讨论】：

您缺少 node-variable 的引号
对这个问题感到困惑。所以您只想将 css 样式应用于特定范围？
到一个特定的跨度，只有当它是元素中的第一个节点（包括文本）。我知道 CSS 没有原始文本的选择器，所以也许这是不可能的

标签： css css-selectors

【解决方案1】：

是的，你可以在纯 CSS 中做到这一点。

使用 CSS first-letter 伪元素似乎会拾取第一个字母，即使它在您的 span 元素中：

<!doctype html>
<html>

<head>
  <style>
    li::first-letter {
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      Very
      <span class="node-variable">high</span> temperature
    </li>
    <li>
      <span class="node-variable">high</span> temperature
    </li>
  </ul>
</body>

</html>

【讨论】：

什么？太简单了哈哈。我怎么不试试这个！？谢谢！

【解决方案2】：

你可以使用 CSS 伪元素 :first-letter:

li::first-letter{
 text-transform: capitalize;
 }

<li>
  <span>Very</span>
  <span class="node-variable">high</span>
  temperature
</li>
<li>
  <span class="node-variable">high</span>
  temperature
</li>

【讨论】：

该死的。我认为我无法更改标记
@DominicBou-Samra，你可以通过使用 JS 来做到这一点，但似乎太复杂了。只是好奇你为什么这样做。为什么不直接将text-transform: capitalize 申请到li？
将大写添加到 li 将不起作用。它将 li 中每个元素的首字母大写。如果我有多个节点变量跨度，它将大写每个
@DominicBou-Samra，我看到你只想让li 中的每个第一个字符都变成大写。如果将其分配给li，它应该可以工作并且不会大写多节点变量。
@DominicBou-Samra，我知道这个编辑有点晚了，因为你已经接受了答案，但你也可以使用 :first-letter 选择第一个单词并使用 text-transform: capitalize 这是你的以前的尝试。