なぜ属性セレクターを使用してクラスを照合するのですか？

次のようなCSSセレクターがあるレスポンシブメールテンプレートの例を見つけました。

a[class="btn"]

これが完全に同じである場合、なぜこの構文が使用されるのですか？

a.btn

モバイルブラウザなどに影響はありますか？

css css-selectors

— デューシン
ソース

@Jevgeni Bogatyrjov：これは、CSSとは関係のないまったく別の質問ですが、タイトルが間違っているために混乱していた可能性があることがわかります。編集しました。

— –BoltClock

144

[]構文は次のとおりです。属性セレクタ。

a[class="btn"]

これにより、が<a>付いclass="btn"たタグが選択されます。ただし、たとえば、を持っているものは選択されません（ただし）。その属性と完全に一致するだけです。<a>class="btn btn_red"a.btn

覚えておかなければならない30のCSSセレクターを読むことをお勧めします。これは、新進気鋭のWeb開発者にとって非常に貴重です。

— エリック
ソース

しかし、それは応答性とは何の関係もありません、それは純粋なCSS構文ですよね？

— ducin 2013年

私も同じチュートリアル（campaignmonitor.com/guides/mobile/coding）に出くわしました-彼らがチュートリアルでこのテクニックを使用するのは奇妙に思えます。チュートリアルは、始めたばかりの人にとって可能な限り明確にする必要があります。特に、共通の.btnセレクターで十分な場合。私は何かが足りませんか？これには何かメリットがありますか？私が推測しているより大きな特異性？

— nickspiel 2014年

jQueryと角かっこを使用してすべてのクラス名を選択し、同じプレフィックスを持つすべてのクラスを取得する新しい方法はありませんか？$（this）.css（ "[class〜 = 'btn_']"、 "red"）;のようなもの構文が間違っている可能性がありますが、正しい構文が何であるか知っていますか？

— whyoz 2015年

@whyozあなたが探していると思います[class^='btn_']。

— エリック

他のタイプの属性セレクターも表示するように回答を更新すると便利です。「cssセレクターの角かっこ」を検索すると、検索でこの質問が表示され、他のバリエーション（「cssセレクターの角かっこスター」）を検索することは困難です。

— cimmanon 2016年