如何将规则应用于以特定单词开头的所有类？

Question

我想申请：

.page-item-124 a {
  font-size: 15px !important;
  font-weight: bold;
}

所有页面项目（以page-item开头的类别）都有。

我该怎么做？

Answer 1

你可以像这样使用CSS3 [attribute * = value]选择器

演示：https://jsfiddle.net/2Lzo9vfc/180/

<强> HTML

<div class="page-item-1">Lorem ipsum</div>
<div class="page-item-2">Lorem ipsum</div>

<强> CSS

div[class*="page-item"] {
  color: blue;
  font-size: 15px;
}

Answer 2

您可以使用带（^=）或通配符（*=）属性选择器的开头：

[class=^page-item] { font-size: 15px !important; font-weight: bold; }

这将选择这些元素：

<p class="page-item-123"></p>
<section class="page-item-intro"></section>

您可能希望将其缩小一点。例如，只选择div元素。

div[class^=page-item] { ... }

另请参阅selector documentation和fiddle demo