html - キャレットで始まる CSS 属性

Question

私が現在維持しているプロジェクトの CSS 属性の多くは、次の^ような キャレットで始まります。

<tr style="^padding-bottom: 10px;">

キャレットに意味はありますか？おそらく、あいまいなブラウザの修正ですか？それとも、以前の開発者が x 回コピーして貼り付けた単なるタイプミスですか (「パディング ボトム」と一緒に常に存在するため)。

Answer 1

前にキャレットがあるスタイルは適用されません。したがって、この場合、HTML コメント全体を使用せずに、CSS スタイルをコメントアウトする方法かもしれません。ただし、これは標準的な方法ではありません。

（例）

---

CSS のキャレット文字には、「Begins With」属性セレクターという意味があります。

属性の値が特定の文字列で始まるかどうかに基づいて、CSS の要素をターゲットにすることができます。

E[foo]  an E element with a "foo" attribute
E[foo="bar"]    an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"]   an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E[foo^="bar"]   an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo$="bar"]   an E element whose "foo" attribute value ends exactly with the string "bar"
E[foo*="bar"]   an E element whose "foo" attribute value contains the substring "bar"

ただし、あなたの場合、キャレットはセレクターとして機能していません。

Answer 2

はい、キャレットは CSS 3 で意味を持ちます。これは CSS 3 の属性セレクターです。このセレクターにより、要素の属性を表現できます。セレクターを要素と照合する式として使用する場合、属性セレクターによって表される属性と一致する属性が要素にある場合、属性セレクターは要素と一致すると見なす必要があります。

しかし、あなたの場合、それはタイプミスかもしれません。

CSS3 属性セレクター - 部分文字列の一致

CSS3 仕様の 3 つの属性セレクターを使用すると、指定された属性の値と文字列の一致を確認できます。これらの属性セレクターは、部分文字列一致属性セレクターと呼ばれます。

[属性^=値]

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

[att$=値]

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

[属性*=値]

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