如何定位直接文本而不是标签内的文本？

有没有办法只定位直接文本<h1>-Tag?

这是我想做的事情的一个例子：

<h1>I want to select this text with a css selector <small>but not this text</small></h1>

这似乎不起作用：

h1:not(small)

有可能吗？

h1:not(small)

您的选择器h1:not(small)不起作用，因为它这样说：

瞄准所有h1不属于的元素small元素。

这与使用相同h1选择器本身。

h1 :not(small)

你会更接近h1 :not(small)，其中说：

定位某个对象的所有后代h1 except small元素。

繁荣！正是您想要的。

除了直接包含在元素内部的文本（即周围没有标签的文本）成为匿名元素. And CSS 无法选择匿名元素.

h1 :not(small) {
  color: orange;
}

<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>

<hr>

<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>

CSS 父选择器

For the small要排除的元素必须将自己标识为h1.

但是还有CSS 中没有父选择器.

解决方案：两个选择器

您需要两个选择器才能完成这项工作：

• 第一个设置父级的样式。
• 第二个会覆盖孩子的第一个。

h1 {
  color: orange;
}

h1 > small {
  color: black;
}

<h1>I want to select this text with a css selector <small>but not this text</small></h1>

更多信息

• 使用 CSS 定位文本节点
• 是否可以明确地设置匿名弹性项目的样式？
• 是否可以选择前面没有文本的元素？