css - 使用 CSS 匹配段落内的子字符串

Question

我有一个<p>Example string</p>里面有一些文字。我想使用 css 在该段落中搜索一个单词。

我知道这是可能的，如果你有例如<a href="test"></a>你所要做的就是：

a[href*="test"]{}

但是当我尝试对我的段落执行此操作时，我似乎无法让它发挥作用。我试过了：

[p*="string"]{}

p[*="string"]{}

Answer 1

简短的回答是NO，仅使用 CSS 是不可能的，您使用的是element[attr=val]选择器，它只选择具有特定值的特定属性的元素。您需要使用带有正则表达式的 jQuery 或 Javascript 来跟踪模式并将样式应用于其元素。

另一方面，您可以创建带有前缀的自定义属性，data-例如，您可以执行类似的操作

<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text 2">Dont Touch This</p>

p[data-custom="Holder Text"] {
   color: red;
}

演示

但同样，这在这里没有意义，如果您知道需要更改哪些元素，您可以简单地分配类。

Answer 2

你不能只使用 CSS，但是你可以查看这篇博客文章，了解如何使用 jQuery 实现这一点。

基本上你应该使用:contains选择器：

$("p:contains('John')")