基于元素文本的 CSS 选择器？ [复制]

Posted 2023-03-06

【中文标题】基于元素文本的 CSS 选择器？ [复制]

【英文标题】：CSS selector based on element text? [duplicate]

【发布时间】：2011-07-23 10:29:36

【问题描述】：

有没有办法根据元素文本在css中选择一个元素？

即：

li[text=*foo]

<li>foo</li>
<li>bar</li>

这可能行不通。

编辑：也只需要支持Chrome即可。

【参考方案1】：

我知道这不是您正在寻找的，但也许它会对您有所帮助。

你可以尝试使用 jQuery 选择器:contains()，添加一个类，然后为一个类做一个普通的样式。

【讨论】：

这对我有用。最终使用了类似的东西：$("div:contains('Text')") .closest("div.parent_div") .css("background", "#555");

@dineshygv 不，不应将其标记为答案。该问题要求使用 CSS 选择器。这个答案是一个完全不同的 jQuery 选择器，它增加了使用 jQuery 的依赖。正确的 CSS 选择器不需要任何特殊的库，只需符合浏览器的 CSS 和 DOM 标准。

令人难以置信的是，这在 Rails 单元测试中有效assert_select '.text-muted:contains("Total Raised")', 'Total Raised'。 guides.rubyonrails.org/v5.0/testing.html#testing-views 我没想到会这样，因为我认为单元测试使用的是 Ruby CSS 选择器，而不是 JQuery。

【参考方案2】：

不直接用CSS，你可以根据内部内容通过javascript设置CSS属性，但最终还是需要在CSS的定义中操作。

【讨论】：

试试 :empty css 选择器。为我解决了。

@DmitriiMalyshev 链接到:empty 选择器的描述：w3schools.com/cs-s-ref/sel_empty.asp

【参考方案3】：

可能已经讨论过了，但从 CSS3 开始，就没有你需要的东西了（另见“Is there a CSS selector for elements containing certain text?”）。 您将不得不使用额外的标记，如下所示：

<li><span class="foo">some text</span></li>
<li>some other text</li>

然后按照通常的方式引用它：

li > span.foo ...

【讨论】：

这可能会造成混淆。所描述的选择器脱离了元素的类，而不是其中的文本。是的，它说“你将不得不使用额外的标记”，但粗略一瞥，很容易被忽略。