匹配具有以特定字符串开头的类名的所有元素[重复]答案

【问题标题】：Match all elements having class name starting with a specific string [duplicate]匹配具有以特定字符串开头的类名的所有元素[重复]
【发布时间】：2012-11-01 08:53:36
【问题描述】：

是否可以对类名以 CSS3 中的特定字符串开头的元素使用“通配符”？

例子：

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

然后神奇地将上述所有divs 一次性设置为红色：

.myclass* { color: #f00; }

【问题讨论】：

[class^='myclass-'], [class*=' myclass-'] { color: red }

标签： css

【解决方案1】：

以下应该可以解决问题：

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

编辑：按照 David 的建议添加了通配符 (*)

【讨论】：

仅当以myclass 开头的类也是class 属性中包含的first 类名。你可能想试试div[class*=myclass] { /* ...stuff... */}。
更好；防止碰撞div[class*=' myclass'],div[class^='myclass']
施威特！我总是忘记属性的事情（可能是因为它看起来很丑。）我仍然不明白的是：根据 W3C 页面：w3schools.com/cssref/css_selectors.asp 语法是：div[class*="test"]然而，它 - 似乎 - 像这样工作，没有指定“元素”： [class*="test"] ...我不明白。 IOW，-为什么-这行得通？（我不是在抱怨，我更喜欢它-更好-！）我只是不想开始使用它并发现它是一个后来被“修复”的错误。有任何想法吗？谢谢！ ---JC
@jchwebdev——这不是一个错误。属性选择器就像任何其他选择器（它可以用作“独立”）。 .myClass 可能与 div.myClass 一起使用没有什么不同。属性选择器可以独立（匹配任何满足该条件的元素）或缩小到特定元素。所以不用担心单独拥有[class*="myClass"] 会很奇怪。
不知道为什么你用div 超过了资格 - 或者你为什么没有包括-

【解决方案2】：

这不是问题的直接答案，但我建议在大多数情况下简单地为每个元素设置多个类：

<div class="myclass one"></div>
<div class="myclass two></div>
<div class="myclass three"></div>

通过这种方式，您可以为所有myclass 元素设置规则，然后为one、two 和three 设置更具体的规则。

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

【讨论】：

通过使用多个类而不是寻找前缀，您还可以节省一些与特异性和选择器速度有关的战斗。属性选择器很慢，但与类相比也非常具体。 +1
我明白了。我正在使用 WordPress，它根据“slug”分配类似的命名类。因此，属性解决方案比尝试向每个相关页面添加其他类要容易得多。
什么鬼？这个答案得到了 3 票赞成，而包含相同方法的 added at exactly the same time 得到了 -4 票。
@sheriffderek 我还是没看到。有 1:1 的对应关系：myclassanother-class、onemyclass-one 也可能需要指定 .generic.special 以增加选择器的特异性以应用覆盖例如颜色。（不是我的答案，我只是看不出有什么区别，而且投票感觉不公平。div 也来自问题。）
@WylliamJudd - 正确。这就是为什么整个 cmets 一开始就起飞的原因。答案是相同的，我首先提交了我的答案，但是（最初）被否决了，而这个被投了赞成票 - 因此所有的混乱。但是，只要他们能帮助未来的人们解决类似的问题，那就太好了！

【解决方案3】：

您可以轻松地将多个类添加到 div... 所以：

<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>

然后在 CSS 调用中对 share 类应用相同的样式：

.myclass {...}

你仍然可以像这样使用你的其他类：

.myclass-three {...}

或者，如果您想在 CSS 中更具体，如下所示：

.myclass.myclass-three {...}

【讨论】：

我认为这个答案那个不好。我只是将另一个类编辑为 myclass... class="myclass myclass-one"
现在类似于上面的
我没有看到上面那个帖子...
我仍然不会给这两个答案太多分，因为他们不回答通配符问题。
正确的，和上面的类似，讽刺的是它是第一个发布的，得到了反对票。哈哈。此外，这不是一个直接的答案，而是一个替代解决方案，可能是原作者没有考虑过的，并且可能是您完全控制 HTML 和 CSS 的所有场景中的理想解决方案。