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 に答える