2

私はあなたが次のようなことができることを知っています

a[href^="http"]{...}
a[data-test*="test"]{...}
a[href$=".com"]{...}

しかし、^、$、* 以外に、CSS/3 で (less や sass のようなフレームワークではなく) 他のより複雑な正規表現を使用できますか?

4

2 に答える 2

5

残念ながら (幸いなことに?)、正規表現を完全にはサポートしていません。不足しているものは[attr~=val]と[attr|=val]です。説明付きのすべての属性セレクターを次に示します。

/* if attr exists */
a[attr]

/* if attr equals val */
a[attr=val]

/* attr is a whitespace-separated list where val is one of the values */
a[attr~=val]

/* attr's value is val followed by '-' (designed for culture codes) */
a[attr|=val]

/* attr starts with val */
a[attr^=val]

/* attr ends with val */
a[attr$=val]

/* attr contains val */
a[attr*=val]

興味があれば、ブログに各セレクターの適切な例をいくつか書いた記事を書きました。

于 2013-10-10T15:21:17.407 に答える
1

まず、CSS レベル 1、2、および 3 のすべてのセレクターは、Selectors Level 3 W3C Recommendation内で文書化されています。これらすべてのリストは、このドキュメントのセクション 2にあります。

角括弧を使用するセレクター[]は、属性セレクター (セクション 6.3 ) として知られています。ここで関心のあるものは、さらに 2 つのタイプに分類されます。

属性の存在と値のセレクター ( 6.3.1 )

これらは CSS2 で導入されました。

[att]
属性の値に関係なく、att 属性を持つ要素を表します。

[att=val]
値が正確に「val」である att 属性を持つ要素を表します。

[att~=val]
値が空白で区切られた単語のリストである att 属性を持つ要素を表し、そのうちの 1 つは正確に「val」です。「val」に空白が含まれている場合は、何も表されません (単語がスペースで区切られているため)。また、「val」が空の文字列の場合、何も表されません。

[att|=val] att 属性を持つ要素を表します。その値は、正確に「val」であるか、「val」で始まり、その後に「-」が続きます (U+002D)。これは主に、BCP 47 ([BCP47]) またはその後継で説明されているように、言語サブコードの一致 (HTML の a 要素の hreflang 属性など) を許可することを目的としています。lang (または xml:lang) 言語サブコードのマッチングについては、:lang 疑似クラスを参照してください。

部分文字列一致属性セレクター ( 6.3.2 )

これらは CSS3 で導入されました。

[att^=val] 値がプレフィックス「val」で始まる att 属性を持つ要素を表します。「val」が空の文字列の場合、セレクターは何も表していません。

[att$=val] 値がサフィックス「val」で終わる att 属性を持つ要素を表します。「val」が空の文字列の場合、セレクターは何も表していません。

[att*=val] 部分文字列「val」の少なくとも 1 つのインスタンスを値に含む att 属性を持つ要素を表します。「val」が空の文字列の場合、セレクターは何も表していません。

Selectors Level 4 W3C Working Draftでは、[att=val]大文字と小文字を区別しないようにすることでセレクターを拡張しています[att=val i]。ただし、これまでに追加された属性セレクターはありません。

あなたの質問に答えるには：いいえ、 、 、 以外の追加の部分文字列一致属性セレクターはあり[att^=val]ませ[att$=val]ん[att*=val]。

于 2013-10-10T15:53:29.337 に答える