基于元素文本的CSS选择器？

Question

有没有一种方法可以根据元素文本在CSS中选择元素？

比如：

ie:

li[text=*foo]

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

那可能不起作用。

编辑：还只需要支持Chrome浏览器。

- Harry

Answer 1

我知道这不完全是你要找的，但或许能帮到你。

你可以尝试使用 jQuery 选择器 :contains()，添加一个类，然后为该类设定样式。

- Błażej Klisz

---

这对我很有用。最终使用类似以下的代码：$("div:contains('文本')")      .closest("div.parent_div")      .css("background", "#555"); - JoshP

不，它不应该标记为答案。问题要求一个CSS选择器，而这个答案是jQuery选择器，两者完全不同，并添加了使用jQuery的依赖性。适当的CSS选择器不需要任何特殊库，只需要浏览器符合CSS和DOM标准即可。 - uchuugaka

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

Answer 2

不能直接用CSS，你可以基于内部内容通过JavaScript设置CSS属性，但最终仍需要在CSS的定义中操作。

- zellio

---

尝试使用:empty CSS选择器。对我很有效。 - Dmitrii Malyshev

@DmitriiMalyshev :empty选择器的描述链接：https://www.w3schools.com/cssref/sel_empty.asp - sebisnow

Answer 3

这可能已经讨论过了，但是在CSS3中没有像你所需要的那样的东西（参见“是否有一个用于选择包含特定文本的元素的CSS选择器？”）。 你将不得不使用其他标记，就像这样：

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

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

li > span.foo {...}

- Agos

---

这可能会让人感到困惑。所描述的选择器是基于元素中的类而不是其中的文本。是的，它说“您将需要使用其他标记”，但只是匆忙浏览的话，很容易被忽略。 - krillgar