Question

我想定位示例1中的<code>标签，而不是示例2：

Sample 1: <p><code>foo()</code> describes the function</p>
Sample 2: <p>Other text comes first, <code>bar()</code> is not at the beginning</p>

code:first-child选择器不将文本节点“其他文本优先”作为子元素。

关于我是否可以在纯CSS中处理任何想法（我知道如何使用JS或通过更改HTML代码来做到这一点，但这不是必需的）

Answer 1

不幸的是，没有。

不是纯CSS。没有“父元素的第一个节点之前没有任何文本”选择器。

即使结合了child combinator和各种同级选择器（adjacent和/或general），也是不可能的。

实际上，即使使用jQuery，JavaScript的解决方案对作者来说也不是简单的事。

Answer 2

在给定的背景下，我也不认为这是可能的。

如果您能够管理单个元素（在本例中为单个<p>元素）中的所有内容，则可以使用CSS :first-of-type选择器，该选择器匹配作为第一个子元素的每个元素，其父的特定类型：

<!DOCTYPE html>
<html>
<head>
<style> 
.colorMe code:first-of-type {
  background: red;
}
</style>
</head>
<body>

<p class="colorMe">
  <code>foo()</code> describes the function<br />
  Other text comes first, <code>bar()</code> is not at the beginning
</p>

<p>
  <code>foo()</code> describes the function<br />
  Other text comes first, <code>bar()</code> is not at the beginning
</p>

</body>
</html>

在这种情况下，只有第一个code元素会以CSS为目标。您可以看到它在运行here。有关CSS :first-of-type selector的更多信息。

希望这会有所帮助：）

可以在父元素中的文本之前定位HTML标记吗？

2 个答案: