是否有按类前缀的CSS选择器？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想将CSS规则应用于其类之一与指定前缀匹配的任何元素。

例如，我想要一个规则，该规则将适用于以status-（A和C，但以下代码段中不包含B）开头的类的div ：

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

某种组合： div[class|=status]和div[class~=status-]

在CSS 2.1下可以使用吗？它可以在任何CSS规范下执行吗？

注意：我知道我可以使用jQuery来模拟。

回答：

这不是可行的与CSS2.1，但它有可能与CSS3属性字符串匹配选择（这 是 在IE7 +支持）：

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

注意第二个属性选择器中的空格字符。这将选择div其class属性满足以下任一条件的元素：

  • [class^="status-"] —以“ status-”开头

  • [class*=" status-"]—包含直接在空格字符后出现的子字符串“status-”。根据HTML规范，类名称由空格分隔，因此是有效的空格字符。如果指定了多个类，这将在第一个类之后检查其他任何类，_并_增加了检查第一个类的好处，以防属性值被空格填充（某些class动态输出属性的应用程序可能会发生这种情况）。

如上所述，您需要组合两个属性选择器的原因是因为诸如这样的属性选择器[class*="status-"]将匹配以下元素，这可能是不希望的：

<div id='D' class='foo-class foo-status-bar bar-class'></div>

如果您可以确保 发生这种情况，那么为简单起见，您可以自由使用这样的选择器。但是，上面的组合更加健壮。

如果您可以控制HTML源代码或生成标记的应用程序，则可以简单地将status-前缀设为自己的status类，而不是像Gumbo建议的那样。

以上是 是否有按类前缀的CSS选择器？ 的全部内容， 来源链接： utcz.com/qa/424536.html

回到顶部