回答編集履歴
1
質問者の疑問点により明確に回答
answer
CHANGED
|
@@ -63,6 +63,19 @@
|
|
|
63
63
|
|
|
64
64
|
ちなみにこれは私も今回改めて確認したことなのですが、HTML上に記述されている要素については、たとえCSSでdisplay:none;としていても :nth-childのカウント対象のままであり、非表示要素も含めて連番が振られてしまう仕様のようです。この辺がまた勘違いの原因の1つにもなっていると思います。（ややこしいですよね）
|
|
65
65
|
|
|
66
|
+
というわけで、質問者さんの疑問点に答えるとすると、以下のようになるかと思います。
|
|
67
|
+
|
|
68
|
+
> ①前半のコードですが、何故 !important をつけたり、cssの順番を上げ、詳細度を高めなくては反映されなかったのか？
|
|
69
|
+
|
|
70
|
+
同じ要素に対して同じ詳細度のセレクタを複数書いたら、後から書いたほうで上書きされる当たり前のCSSの挙動となっているだけ。 !importantを使って詳細度最優先にした場合も同じ。仕様どおりの挙動です。
|
|
71
|
+
|
|
72
|
+
> ②後半の例のコードですが、何故 こちらは正常に反映されるのでしょうか？
|
|
73
|
+
|
|
74
|
+
1つ目の例とはHTMLの構造が異なるため、:nth-child(n+2) が「説明2」以下のdivに対して有効となっているから。
|
|
75
|
+
|
|
76
|
+
です。
|
|
77
|
+
|
|
78
|
+
|
|
66
79
|
今回の問題は、〜child と 〜of-type の仕様の違いをよく理解しないまま:nth-child(n+2) を使ってしまったことにあるかと思います。
|
|
67
80
|
作りたいデザインを最もシンプルに作るのであれば、
|
|
68
81
|
|