Question

我正在寻找选择器来匹配一个值，该值是类的值中带连字符的单词列表。 [class|="word"]应该是这样做的，但它之前不可能有任何东西。如果有一个空格分隔的单词作为值，或者根本没有空格，则选择器[class*="word"]将起作用。第一种情况的例子可以在http://jsbin.com/OkIxaNa/2/看到。

CSS

div {
  width:50%;
  height:100px;
  background-color:#aaa;
  margin: 5px 0 5px 0;
}

/*selector one*/
[class|="example-one"] {
  background-color:#0aa;
}

/*selector two*/
[class*="example-two"] {
  background-color:#a0a;
}

HTML

<div class="example-one-3">
  rule 1<br/>
  match
</div>
<div class="example-one-5">
  rule 1<br/>
  match
</div>
<div class="chaos example-one-7">
  rule 1<br/>
  wanted to match
</div>
<div class="chaos example-two-7">
  rule 2<br/>
  match
</div>
<div class="chaosexample-two-7">
  rule 2<br/>
  do not want
</div>

我特别想要的是能够选择单词 - 单词 - 单词格式的现有类。所以对任何具有col - * - 4类值的元素说。

这只能使用css选择器吗？

Answer 1

试试这个解决方案：

div[class|=start][class$=end] {
  color: red;
}

<div class="start-anything-end">text</div>

属性选择器以一个由空格分隔的值为目标，是一个带连字符的单词列表

1 个答案: