idの優先順位について

いつもお世話になってます。

下記検証のコード（添付画像）で分からないところがあります。

青色箇所のコードですが、id="mt50"が反映されません。

セレクタの種類による優先順位として
１、idセレクタやclassセレクタなどの具体的・局所的なセレクタは、タイプセレクタや全称セレクタのような全般的なセレクタより優先される
２、idセレクタはclassセレクタより優先され、タイプセレクタは全称セレクタより優先される（idセレクタ > classセレクタ > タイプセレクタ > 全称セレクタ）
３、要素を特定したidセレクタ・classセレクタは、要素を特定しないidセレクタ・classセレクタより優先される
４、優先順位が同じになった場合は、最後に指定したスタイルが適用される

というルールがあると思いますが、どれに当てはまっているから動かないのかがよく分かりません。

何が違うのでしょうか？？

コードの提示が必要な場合は提示いたしますのでおっしゃってください。

宜しくお願いします。

行動規範の内容に同意します

回答3件

#contentsSixtharea img
#mt0

前者は後者よりも詳細度が高いからです。
過去スレッドで詳しい回答を書きました。

Re: kato00 さん

投稿2018/04/14 08:35

編集2018/04/14 08:46

think49

総合スコア18162

think49

2018/04/14 09:09

To: lucker さん > バーカバーカ反応するのもどうかと思いましたが、まさにブーメランだったので、お返しします。 https://teratail.com/questions/121787 > lucker 2018/04/14 15:54 > すぐバーカとかいう人は野蛮だとおもいまぁす。

行動規範の内容に同意します

優先順位の話は合ってるんですが、今回のような

css
1#aaa img {}
2#bbb {}

のように複合された時の指定も含んでいます。
・idセレクタが多い方が優先され、
idセレクタの数が同じ場合
・クラスセレクタが多い方が優先され、
idセレクタの数もクラスセレクタの数も同じ場合
・タイプセレクタが多い方が優先され

ます。

優先順位が高い方を多く持っている方が優先され、それらが同じ場合初めて
「優先順位が同じ」と言えます。その「優先順位が同じ」状態で

４、優先順位が同じになった場合は、最後に指定したスタイルが適用される

となります。

今回の場合はidセレクタの数が同じ[1]ですがタイプセレクタの数が違っており
優先順位が負けているので#mt50の指定は上書きされています。

投稿2018/04/14 11:35

sousuke

総合スコア3828

セレクタの話と、スタイルの適用は全く別の話ぞなもし。
スタイルは!important指定しない限り後に書いた方で上書きされるぞなもし。

投稿2018/04/14 08:25

退会済みユーザー

総合スコア0

think49

2018/04/14 08:41 編集

> スタイルは!important指定しない限り後に書いた方で上書きされるぞなもし。後述が優先されるルールは specificity が同じときだけでは…。

退会済みユーザー

2018/04/14 08:38

あーなるほど、何悩んでるのかなんとなくわかった。多分、挙動としては、#mt50という要素については margin-top: 50px; が適用されるんだ。でも、#contentsSixhared の imgには margin 0 auto; が適用されるので、こっちがの方が詳細項目の設定になるので、こっちで上書きされるんだ。こういう書き方するとわけわからんくなる良い例だな。