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

按类前缀的 CSS 选择器

问题：

应用 CSS 是否可行规则到至少一个类以指定前缀开头的元素？例如，假设我们有以下 HTML 片段：

<div>
<p>我们可以应用一条规则，仅针对类以“status-”开头的 div 吗？</p>
<p><strong>答案：</strong></p>
<p><strong>CSS 2.1:</strong></p>
<p>在 CSS 2.1 中，这是不可能的。</p>
<p><strong>CSS 3:</strong></p>
<p>CSS3 引入了属性子字符串匹配选择器，使得这possible:</p>
<pre class="brush:php;toolbar:false">div[class^="status-"], div[class*=" status-"]

• [class^="status-"] 匹配 class 属性以“status-”开头的元素。
• [class*=" status-" ] 匹配类属性在空格字符后直接包含“status-”的元素（确保它不是另一个单词的一部分）。

注意后一个选择器包含有意的空格字符，因为类名通常由空格分隔。这会检查元素的类属性中的任何其他类，并处理类属性用空格填充的情况。

如果您可以保证您的标记永远不会有状态前缀嵌入到另一个单词中的元素，那么您可以将选择器简化为 [class*="status-"]。但是，为了稳健性，建议组合使用两个选择器。

或者，如果您可以控制 HTML 生成，则创建具有所需前缀的专用“状态”类可能会更容易。