为动态类名设置CSS规则

Question

我有一个创建动态类名元素的WordPress主题。我不想弄乱PHP代码，所以我只想在CSS上做出更改。

每个元素都有像这样的代码:

<dd class="variation-testing">Testing</dd>

我尝试使用这个 CSS 规则，它应该可以工作，但似乎根本没有应用到元素上：

dd.[class^=variation-] {
  width: 48%;
  float: left;
}

如何仅使用类名的第一部分来添加CSS？

更新：

答案很简单，在评论中找到了。正确的CSS没有点。

dd[class^=variation-] {
  width: 48%;
  float: left;
}

- Tasos

---

尝试在您的选择器中删除“dd”后面的点（.）。 - dgavian

你是正确的。但是，我在网上找到的所有其他示例都是使用点的。谢谢！ - Tasos

仅供参考，句点用于告诉CSS引擎您正在寻找与以下文本匹配的类，但是因为您正在使用属性选择器"[class^=...]"，所以句点无效（例如，您的第一个选择器正在查找具有"[class^=variation-]"类的<dd>元素）。 - Zeb Rawnsley

@ZebRawnsley 谢谢。可能我在某个地方错过了意思 :) - Tasos

请将您的解决方案发布为答案（而不是对问题的编辑），以便日后参考。 - emmanuel

@emmanuel 我不想抢答案的功劳，一直在等dgavian去做。如果他不做，我会晚些时候去做。 - Tasos

Answer 1

是的，正如评论中所述，应该使用克拉选择器。最初的回答。

dd[class^=variation-] {
  width: 48%;
  float: left;
}

这里提供了CSS属性选择器的参考资料：https://www.w3schools.com/css/css_attribute_selectors.asp。您可以在这个网站上找到有关如何使用CSS属性选择器的详细信息。

- Jennifer Goncalves