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

Demo

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