回答編集履歴
2
補足説明を追記
test
CHANGED
|
@@ -1,7 +1,23 @@
|
|
|
1
1
|
まず、今回のh3要素にclass="aabb"が付いていたとしても、".article h3"に指定したスタイルは全て適用されます。（問題のh3要素はarticleクラスの要素の配下にある前提でお話ししています）
|
|
2
2
|
|
|
3
|
-
そして、".article h3.aabb"に指定されているスタイルが適用されるのですが、この時、".article h3"に指定したのと重複するものがあったときだけ、".article h3.aabb"に指定したもので上書きされることになります。
|
|
3
|
+
そして、".article h3.aabb"に指定されているスタイルが適用されるのですが、この時、".article h3"に指定したのと重複するものがあったときだけ、".article h3.aabb"に指定したもので上書きされるということになります。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
具体的に今回どのスタイルだけを```<h3 class="aabb"> 文章 </h3>```に付けたいのか分からないので具体的な説明は出来ないのですが、".article h3.aabb"に指定されているスタイルのうち、付けたくないものについては".article h3.aabb"の方で上書きする必要があります。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
（追記）本当なら、h3の中で、例えば色違いなど2種類用意したい場合（仮にそれぞれ'heading-primary'、'heading-secondary'というクラス名を付けるとします）
|
|
12
|
+
|
|
13
|
+
- articleクラスの下のh3要素全てに適用したいスタイルを".article h3{}"の中に記述
|
|
14
|
+
|
|
15
|
+
- '.heading-primary'だけに適用したいスタイルを".article h3.heading-primary{}"の中に記述
|
|
16
|
+
|
|
17
|
+
- '.heading-secondary'だけに適用したいスタイルを".article h3.heading-secondary{}"の中に記述
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
というような作りにすることが多いですね。
|
|
22
|
+
|
|
23
|
+
こうすれば上に書いた上書きのことはあまり考えなくてよくなりますが、これはこれでしっかり考えて書かないと、意図しないスタイルが適用されてしまうことにもなります。
|
1
補足事項を追記
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
まず、class="aabb"が付いていたとしても、".article h3"に指定したスタイルは全て適用されます。
|
|
1
|
+
まず、今回のh3要素にclass="aabb"が付いていたとしても、".article h3"に指定したスタイルは全て適用されます。（問題のh3要素はarticleクラスの要素の配下にある前提でお話ししています）
|
|
2
2
|
|
|
3
3
|
そして、".article h3.aabb"に指定されているスタイルが適用されるのですが、この時、".article h3"に指定したのと重複するものがあったときだけ、".article h3.aabb"に指定したもので上書きされることになります。
|
|
4
4
|
|