CSSアトリビュートセレクタが通常のCSSクラスセレクタよりも優先されます

Question

SVGファイルでCSSを操作するとき、もともと私はこの問題に気づいていましたが、レンダリングエラーだと思っていましたが、

次のコードを取る：正常クラスセレクタを使用して、予想されるようにそれ以降のファイルでは、blue、こうして得られた色として再定義されるが、colorの値は、最初​​であり、この場合に

.example {color:green} 
.example {color:blue} 

をクラス内の要素の青は青です。値が通常のCSSクラスセレクタを使用して再定義されたときに、今、最初に属性セレクタを使用してexampleでのdivのための色の値を定義し、この場合、緑からの変更を

div[class='example'] {color:green} 
.example {color:blue} 

：

今、この例を取ります青はdiv内では無視され、属性セレクタによって設定された値が優先されます。ただし、クラス全体の青色値が後でファイルで再宣言されます。

CSS class selectorsのMozillaのドキュメントによれば、通常のセレクタと属性セレクタは「同等」と言われていますが、この状況ではそうではありません。これの原因は何ですか？

Answer 1

私はもともとこれをコメントとして投稿しましたが、おそらく私はそれに答えるべきでした。

div[class='example'] {color:green} 

• 要素がなければなりません<div>
• 要素は、クラス "例" を持っている必要があります

：

---

のは、あなたの2つのCSSルールの実態を見てみましょう

.example {color:blue} 

あなたの最初のCSSルールは 2つの条件を持っているので、あなたの二番目のルールだけを持っているのに対し、

• Elementは、

---

をクラス「例」を持っている必要があり、最初のルールはより具体的である - そのためには、優先されます。

最初のルールからdiv部分を削除する場合は、同等の（MDN状態として）考えられます。その時点でテキストは青色になります。

Answer 2

Mozillaのマニュアルが正しいです。 しかし、具体性を考慮する場合、アカウントdivと[class='example']に入る必要があります。 これら2つの組み合わせは、.exampleより強いです。ここで

は、特異性の素敵な表現です： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

あなたがsmasingmagazine.com articeleを行くと開いた場合、あなたはそれを締結します：div[class='example']に電力が供給されているのに対し

.exampleは10

の力を持っています11