Question

我正在寻找一种方法在css中选择一个具有与字符串开头匹配的类的元素。我知道[class * =“string”]和[class ^ =“string”]规则，但那些并不是我正在寻找的。 ^ =只匹配第一个类，因此任何前面的类都会破坏它。并且* =查找字符串的任何部分，而不仅仅是开头。

http://codepen.io/anon/pen/HiJjL

HTML:

<div class="asdf col-6">match</div>
<div class="col-6">match</div>
<div class="x-col-6">dont match</div>

CSS:

[class *= "col-"] {
    color:red;
}
[class ^= "col-"] {
    font-weight:bold;
}

笔说明了问题。第一个选择器太宽，第二个选择器太窄。当然，我可以通过使用* =并小心我的其他类名来解决这个问题，但我很好奇这是否可能。

Answer 1

<强> CSS

span[id^='string_'] {}

<强> HTML

<span id="string_example">string example</span>

Answer 2

我不知道这种可能性，但我也认为这不是正确的方法。更好的解决方案是向元素添加多个类。

<div class="asdf col col-6">match</div>
<div class="col col-6">match</div>
<div class="x-col-6">dont match</div>

这样，你可以告诉div是'col'（列？），更具体地说，它是'col-6'。

匹配任何以string开头的css类

2 个答案: