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

Question

有没有一种方法只针对 <h1> 标签中的直接文本进行操作？

以下是我想要实现的示例：

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

这似乎不起作用：

h1:not(small)

这真的可能吗？

- JiiB

---

不行，但是你可以针对<small>中的内容进行设置，并取消你刚刚为<h1>设置的内容。 - tao

Answer 1

h1:not(small)

您的选择器 h1:not(small) 不起作用，因为它的意思是：

目标所有不是 small 元素的 h1 元素。

这与仅使用 h1 选择器相同。

---

h1 :not(small)

您应该使用h1 :not(small)，它表示：

选择所有h1的后代元素，但不包括small元素。

太棒了！正是您想要的。

但是，直接包含在元素内部的文本（即没有标签的文本）会成为匿名元素。而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父选择器

要排除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定位文本节点
• 是否可以明确地为匿名的flex项目设置样式？
• 是否可以选择不是由文本前置的元素？

- Michael Benjamin

---

感谢您的具体答案。我能够使用：h1:not(small)。 - JiiB

Answer 2

这是保留样式但不使用父级div实现的最接近方式，尽管此功能尚未完全集成到所有浏览器中，但应该可以在某些浏览器上正常工作。希望能帮到您。

浏览器支持 -

这里在做什么？

小标签保留了原来的CSS样式，不受其他样式的影响。您可以将其应用于任何想要保留样式的子元素。

small {
  all: initial;
  * {
    all: unset;
  }
}
h1 {
    color: #ff0000;
}

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

- user7207170

---

我看不出来这如何回答所问的问题。它只做了一件事：选择h1下的任何非h1子元素。它并没有排除span继承其父级样式的可能性... - agrm

已更新，请再次检查以确认是否满足您的查询。@agrm - user7207170

请记住，这个答案在一些浏览器上不起作用。（截至本评论发布时） - zvava

Answer 3

对 h1 应用样式，然后在 small 中还原这些更改。例如，如果您只想更改颜色，则可以使用以下代码：

h1 { color: red; }
h1 small { color: initial; }

或者，如果您有多个样式更改；

h1 {
    color: red;
    font-weight: italic;
    text-transform: uppercase;
}

h1 small {
    color: initial;
    font-weight: initial;
    text-transform: initial;
}

请注意，initial CSS 值可在除 IE 和 Opera Mini 之外的所有浏览器上使用。请查看this page以获取更多信息。

- zvava