以下では、地獄のcssセレクターが正しいように動作しない場合があることと、実際にどのように動作するかについて説明します。
第1章-うまくいく！
複数のセレクターが何らかの方法で同じ要素を指しているときに、どのスタイルが適用されるかを判断するためにセレクターを比較検討し、同じスタイルを変更しようとします。 誰がそれ以上の体重とスタイルを持ち、計量の法則は純粋に経験に基づいているように見えるものよりも千倍単純です。
だから、重量を量った-最初に8つの数字の数行を想像してください：
0,1,0,0,0,0,0,0
1,0,0,0,0,0,0,0
会う-だから数でいくつかの2つのセレクターは、誰も私がそれらを条件付きで「上」と「下」と呼ぶものを推測しないように見える
どちらがより難しいかを見つけるには、次の手順に従って、何も混同しないようにする必要があります。
- 左端の数字を見る
- それらをさらに選択してください。 -このセレクターは最も難しい
- 番号が同じ場合は、右にシフトして、段落2の手順を繰り返します。
- すべての数値が同じ場合、最後に宣言されたセレクターのスタイルが適用されます
最も恐ろしい秘密
これを読めば、心の安らぎは永遠にあなたを離れますが、少なくとも夜は眠れます。
最も恐ろしい秘密を明らかにして、普通のセレクターを実際にそのような理解可能で美しい数字に変える方法を教えますか？ すべてがいつものように非常に簡単です：
- タグ セレクターの各タグに対して、一番右の番号1をスローできます。
a – 0,0,0,0,0,0,0,1 div a – 0,0,0,0,0,0,0,2
- Classes 、セレクターの各クラスまたは擬似クラスに対して、右側の2番目の数字に1つをスローできます
.head .logo – 0,0,0,0,0,0,2,0 .logo.big – 0,0,0,0,0,0,2,0 div:first-child – 0,0,0,0,0,0,1,1 .logog > .big – 0,0,0,0,0,0,2,0
はい、あなたは正しく理解しました。 Cssセレクターは、スペースや「>」のようなこれらすべての喜びを吐き出したいと思っていました。
- セレクターの各IDについて、右側の3番目の数字に1つ追加します。
#head – 0,0,0,0,0,1,0,0 #head #logo – 0,0,0,0,0,2,0,0
あなたは要点を得たと思う、今あなたはこれをチェックするために小さなクイズを始めることができる：
クイズ
<head> <title></title> <style> span p { background-color: gray; } html p { background-color: red; } </style> </head> <body> <div> <span><p>?</p></span> </div> </body>
質問：段落の背景は何色ですか？
回答：そうです、セレクターはそこに見えるものを気にせず、タグ間の距離は彼には興味がないので、そうです。 また、タグの重みが等しいため、最後のタグが適用されます。
<head> <title></title> <style> div.test1 { background-color: gray; } div > .test1 { background-color: yellow; } div .test1 { background-color: red } </style> </head> <body> <div> <div class='test1'>?</div> </div> </body>
質問：歌姫の背景は何色ですか？
答え：そうです、赤です。体重を測定するとき、とにかくクラスの間に隙間を空けたり、大きな記号を付けたり、スペルを間違えたりするからです。 これらすべてのセレクターの重みは同じです。つまり、後者が適用されます。
<head> <title></title> <style> #id1 div { background-color: gray; } #id2 { background-color: red } </style> </head> <body> <div id="id1"> <div id="id2">?</div> </div> </body>
質問：すべて同じです。
回答：そして、変更に対する答えは異なります。divは灰色になります。 先ほど述べたように、セレクターはあなたがそこで意味することとはまったく無関係だからです。 最初のセレクターの方が重みが大きく、この動作ではないと思われることを誰も気にしません。
秘密を秘密に
まだたくさんの数字が残っているので、それらが何を意味するのかを知りたいと思います。秘密を明らかにし続けています。
- セレクター*は 、完全に無重量です。
- 属性セレクターは最も一般的な擬似クラスであり、通常のクラスと同じくらいの重さです
- 要素のstyle =””属性で記述されたインラインスタイルは、優先度0,0,0,0,1,0,0,0を自動的に優先するため 、すぐに非常にクールになります。
- そして、次の4桁はすべて属性を持つ古い友人です！重要
div { background-color: gray !important; } background-color - 0,0,0,1,0,0,0,0 .header { background-color: gray !important; } 0,0,1,0,0,0,0,0
みんなクイズが大好き
<head> <title></title> <style> a.class1 { color: blue; } a[href="#"] { color: green; } a[href^="#"] { color: red; } </style> </head> <body> <a class="class1" href="#">?</a> </div> </body>
質問：リンクに疑問符は何色になりますか？
回答：赤、属性の完全一致のセレクターが、「で始まる」すべてを選択するセレクターよりも具体的に見えることは問題ではありません。 彼らは同じ重量を持っています。
<head> <title></title> <style> #id1 { background-color: gray !important; } </style> </head> <body> <div id="id1" style="background-color: red;">?</div> </body>
質問：私が最初に特許を取得した質問。
答え ：！重要なのはインラインスタイルよりもクールで、さらにクールです-so bam-bam-bam-グレー！
すべてのテストのソースはこちら
PS少しポルノ
<head> <title></title> <style> #id1 { background-color: gray !important; } </style> </head> <body> <div id="id1" style="background-color: red !important;">red</div> </body>