1

我正在寻找选择器来匹配一个值，该值是类值中的连字词列表。[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选择器吗？

4

1 回答 1

1

试试这个解决方案：

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

<div class="start-anything-end">text</div>
于 2013-08-26T19:25:01.370 回答