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

Question

有没有办法只定位<h1> - 标签中的直接文字？

以下是我想要做的一个例子：

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

这似乎不起作用：

h1:not(small)

甚至可能吗？

Answer 1

h1:not(small)

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

  

定位非h1元素的所有small元素。

与单独使用h1选择器相同。

h1 :not(small)

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

  

定位除h1元素之外的small的所有后代。

轰！正是你想要的。

除了直接包含在元素内的文本（即没有标签的文本）成为匿名元素。并anonymous elements are not selectable by 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的子元素。

但是有no parent selector in 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>

更多信息

• Targeting text nodes with CSS
• Is it possible to style anonymous flex items explicitly?
• Is it possible to select elements not preceded by text?

Answer 2

这是保留样式的最接近的，没有任何由父div实现的css。此功能尚未完全集成到所有浏览器中，但它应该适用于某些浏览器。希望能帮助到你。

浏览器支持 -

这里做了什么？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

请注意，除了IE和Opera Mini之外，每个浏览器都可以使用initial CSS值。查看this page了解详情