回答編集履歴
3
原因把握したので回答を修正
test
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
https://developer.mozilla.org/ja/docs/Web/CSS/C
|
|
1
|
+
> 直接対象となる要素のスタイルは、継承されたルールの詳細度に関係なく、常に継承されたスタイルよりも優先されます。
|
|
2
|
+
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#%E7%9B%B4%E6%8E%A5%E5%AF%BE%E8%B1%A1%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%A8%E7%B6%99%E6%89%BF%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB
|
|
3
3
|
|
|
4
|
+
継承されたスタイルは、直接要素に指定されたスタイルよりも優先度は低くなるようです。
|
|
5
|
+
|
|
6
|
+
背景色はlabel( `#test12 li label` )で設定しているが、
|
|
7
|
+
変数は祖先のli( `.a2` )に対して設定されているため、
|
|
8
|
+
直接の要素で指定されているimportantなしの方が適用されるようです。
|
|
9
|
+
|
|
10
|
+
なので、背景色設定自体は直接要素`#test12 li label`、
|
|
11
|
+
色変数は親要素`#test12 li`で定義すれば、
|
|
4
|
-
|
|
12
|
+
`.a2`のimportantで勝てるようです。
|
2
内容が誤っていたため訂正
test
CHANGED
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
importantは
|
|
1
|
+
importantが記載されたプロパティは、記述なしのものよりも優先される必要があります。
|
|
2
2
|
https://developer.mozilla.org/ja/docs/Web/CSS/Cascade
|
|
3
3
|
|
|
4
|
-
それ
|
|
4
|
+
そのため、バグかと思われます。
|
|
5
|
-
CSS変数に限らず同様の現象が発生するようですので、
|
|
6
|
-
chromiumに重要度と詳細度のルールにバグがあるかもしれませんね。
|
|
7
|
-
(chrome 112.0.5615.138で検証)
|
|
8
|
-
|
|
9
|
-
他のブラウザでも検証した方が良さそうですが、時間がないので報告として回答しておきます。
|
|
10
|
-
|
|
11
|
-
https://jsfiddle.net/cLjbwhz1
|
|
12
|
-
|
1
加筆
test
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
importantは無しのものよりも優先されている必要があります。
|
|
2
|
+
https://developer.mozilla.org/ja/docs/Web/CSS/Cascade
|
|
3
|
+
|
|
4
|
+
それを踏まえた上で検証したところ、
|
|
1
|
-
CSS変数に限らず同様の現象が発生するようですので、
|
|
5
|
+
CSS変数に限らず同様の現象が発生するようですので、
|
|
6
|
+
chromiumに重要度と詳細度のルールにバグがあるかもしれませんね。
|
|
2
7
|
(chrome 112.0.5615.138で検証)
|
|
3
8
|
|
|
4
9
|
他のブラウザでも検証した方が良さそうですが、時間がないので報告として回答しておきます。
|