CSSで値を持つ属性を持つ要素をターゲットにするにはどうすればよいですか？

Question 1

CSSで特定の属性を持つ要素をターゲットにできることはわかっています。次に例を示します。

input[type=text]
{
    font-family: Consolas;
}

しかし、任意の値の属性を持つ要素をターゲットにすることは可能ですか（何も、つまり属性が要素に追加されていない場合を除く）？

大まかに次のようなものです。

a[rel=*]
{
    color: red;
}

<a>このHTMLの最初と3番目のタグをターゲットにする必要があります。

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

デフォルトでcursor: pointerは<a>、href属性に値を持つすべてのタグに適用されるように見えるため、可能だと思います。

Question 2

以下は、rel定義された属性を持つすべてのアンカータグに一致します。

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

更新： 前述の@vsyncのシナリオを説明するために、コメントセクション（空の値と空でない値を区別する）で、CSS:not 疑似クラスを組み込むことができます：

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Question 3

はい、CSS 3セレクターには、いくつかの属性セレクターがあります。

例えば

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

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

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

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

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

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

Question 4

ブラウザがデフォルトで属性を設定する場合は、回避する必要があるかもしれないことを追加する必要があります。これは「現代の」ブラウザでは問題ではないようですが、これは私が見た問題なので、クロスブラウザのパフォーマンスを必ず確認してください。

たとえば、9より前のIEでは、colSpanがテーブル内のすべてのTDに設定されているため、単一のセルの隠しcolspan値が1であることがわかりました。

したがって、Webドキュメントで適用する「colspan属性を持つ任意のTD」をターゲットにしている場合、単一セルであるTDなど、colspan属性が設定されていないtdでもcssスタイルを受け取ります。IEが9未満の場合、基本的にすべてのスタイルが設定されます。

これを懸念する唯一の理由は、IE8を超えてアップグレードできない残りのすべてのXPユーザーです。

たとえば、コンテンツが端から端までシフトする可能性のあるテーブルのグループがあり、最後または最初のいずれかで1〜7個のセルが空白のままになっています。

colspan属性を使用して、最後または最初の空白セルに色を適用したいと思います。以下を使用すると、9未満のIEでは機能しません

#my td[colspan] {background-color:blue;}

...すべてのTDがスタイリングされます（条件付き属性のスタイリングはIEで優れていると思われるので面白いですが、私は余談です...）。

スタイリングスキームに含めたい孤立セル/ TDのcolspanの値を「single」に設定すると、すべてのブラウザで次のように機能しますが、「ハック」であり、適切に検証されません...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

または、「if lt IE 9」を使用して条件付きスタイルを設定することで、問題をより適切に解決できるはずです。これを行う正しい方法です。プロセスで「適切に構築されたcss」をIElt9から非表示にする必要があることを覚えておいてください。これを行う唯一の適切な方法は、選択的なスタイルシートを使用することです。

とにかく私たちのほとんどはすでにそれを行っていますが、それでも、ブラウザが自動属性を適用しない場合に自動属性を適用するかどうか、および属性値のスタイル設定のためにそれ以外の場合は正しい構文をどのように処理するかを検討してテストすることは十分です。

（ところで、colspanは[css3の時点で]まだcss仕様に含まれていないため、この例では検証エラーはスローされません。）