2

このセレクターを考えると：

body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}

これは、 page-node-add-のサブストリングを含むクラスと、正確にpage-node-editであるクラスを持つ本体に一致します。

最初または2番目（両方ではない）に一致すると言いたいです。出来ますか？

カンマの使用に関する問題：

私が次のような長いセレクターを持っている場合：

body[class*="page-node-add-"] form.node-form > .field-type-field-collection > table > thead tr th,
body[class~="page-node-edit"] form.node-form > .field-type-field-collection > table > thead tr th
{...}

それは私がCSS3がそれを改善すると思っていたであろう苦痛です、私は次のようなものを想像していました：

body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}

ありがとう

4

3 に答える 3

3

カンマを使用してそれらを分割する必要があります。

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

カンマの使用に関する問題：

...それはコンマ以外の方法ではできないということです。おそらくセレクター3で改善できたかもしれませんが、残念ながら仕様にはそうではないと書かれています。これは、最近まで提案されなかったか、提案されたがレベル3のカットを行わなかったため、セレクター4によってのみ修正されます。

セレクターのレベル4では、次のようなことができます。

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

現在、これは最初に提案された名前で:any()、接頭辞:-moz-any()と。を付けて実装されてい:-webkit-any()ます。しかし:any()、公開CSSで使用することは、

  1. GeckoとWebKitのみがそれをサポートしています。と

  2. プレフィックス付きセレクターの処理方法のために、ルールセットを複製する必要があります。これは、セレクターの意図された目的を損なうだけでなく:matches()、事態をさらに悪化させます。

    body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

言い換えると、実装が標準化されたものに更新されるまで、:matches()他の実行可能な解決策はありません（プリプロセッサーを使用して繰り返しセレクターを生成することを避けてください）。

于 2012-05-25T10:57:35.710 に答える
1

私はここで答えを見つけました：

複数のクラスを識別するためのCSSの省略形

Mozillaとwebkitには-moz-anyまたは-webkit-anyがありますが、CSS4仕様には：matchesがあります。驚いたことに、これはCSS3では考えられていませんでした。これは、SASSやLESSなどを使用せずに反復コードの量を大幅に削減するためです。

于 2012-05-25T11:14:09.303 に答える
1

だからXOR私があなたの質問を読んだときにあなたは本当に欲しいです。セレクターを使用して:not「一方をクラス化し、もう一方をクラス分けしない」と言うことでこれを達成できます。

div.one:not(.two), div.two:not(.one) {
    background:red;
}

ここにフィドルがあります：http： //jsfiddle.net/XfgxK/3/

于 2012-05-25T11:27:58.110 に答える