回答編集履歴
1
質問者の疑問点により明確に回答
test
CHANGED
|
@@ -128,6 +128,32 @@
|
|
|
128
128
|
|
|
129
129
|
|
|
130
130
|
|
|
131
|
+
というわけで、質問者さんの疑問点に答えるとすると、以下のようになるかと思います。
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
> ①前半のコードですが、何故 !important をつけたり、cssの順番を上げ、詳細度を高めなくては反映されなかったのか？
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
同じ要素に対して同じ詳細度のセレクタを複数書いたら、後から書いたほうで上書きされる当たり前のCSSの挙動となっているだけ。 !importantを使って詳細度最優先にした場合も同じ。仕様どおりの挙動です。
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
> ②後半の例のコードですが、何故 こちらは正常に反映されるのでしょうか？
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
1つ目の例とはHTMLの構造が異なるため、:nth-child(n+2) が「説明2」以下のdivに対して有効となっているから。
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
です。
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
131
157
|
今回の問題は、〜child と 〜of-type の仕様の違いをよく理解しないまま:nth-child(n+2) を使ってしまったことにあるかと思います。
|
|
132
158
|
|
|
133
159
|
作りたいデザインを最もシンプルに作るのであれば、
|