CSS 可以根据类前缀选择元素吗？

基于前缀的 CSS 类选择可能吗？

在 Web 开发领域，通常需要将 CSS 规则应用于基于元素的 CSS 规则。在特定的类前缀上。例如，您可能想要定位类以“status-”前缀开头的元素。

无法使用 CSS2.1 做到这一点

不幸的是，CSS2 .1没有提供任何直接的方法来实现基于前缀的类选择。然而，CSS3 属性子字符串匹配选择器来拯救我们。

CSS3 基于前缀的选择

CSS3 引入了两个可以帮助我们的属性选择器：

[class^="status-"], div[class*=" status-"]

细分选择器：

• [class^="status-"] - 匹配类属性以“status-”开头的元素。
• [class*=" status-" ] - 匹配类属性在空格分隔的字符串中包含“status-”的元素。

组合这两个选择器确保我们捕获所有适当的元素，即使是那些具有多个空格分隔的类的元素。

另一个问题

请注意，只需使用 [class*="status-" ] 也可能匹配如下元素：

<div>
<p>为了避免这种情况，最好将两个选择器组合起来，如图所示</p>
<p><strong>其他选项</strong></p>
<p>如果您可以控制 HTML 标记，更简单的方法是将状态前缀分离到其自己的类中，例如：</p>
<pre class="brush:php;toolbar:false"><div><p>这允许您以 [class="status-important"] 为目标元素。</p></div>