質問編集履歴
1
「ベンダープレフィックス」ではなく「user agent stylesheet」による上書きだったため、タイトルと質問内容を変更いたしました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
「user agent stylesheet」と詳細度について質問がございます
|
test
CHANGED
|
@@ -1,24 +1,44 @@
|
|
|
1
1
|
### 実現・質問したいこと
|
|
2
2
|
|
|
3
|
-
IDセレクタで指定したbuttonタグのCSSが
|
|
3
|
+
IDセレクタで指定したbuttonタグのCSSが「user agent stylesheet」によって上書きされてしまいました。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
しかし「user agent stylesheet」によるセレクタの指定は要素セレクタであり、
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
IDセレクタの方が詳細度が強いと認識しております。
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
何故、詳細度で下回っているはずの要素セレクタが優先されたのでしょうか？
|
|
11
|
+
**何故、詳細度で下回っているはずの要素セレクタが優先されたのでしょうか？**
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
また、buttonタグは
|
|
15
|
+
また、buttonタグは「user agent stylesheet」が効いてしまい、
|
|
16
|
+
|
|
17
|
+
全体に設定したCSSが上書きされてしまう為、
|
|
16
18
|
|
|
17
19
|
他のタグに比べて少々扱いづらい印象を受けてしまうのですが、
|
|
18
20
|
|
|
19
|
-
リセットCSSで対応するのが一般的な手法になるのでしょうか？
|
|
20
21
|
|
|
21
22
|
|
|
23
|
+
こちらはリセットCSSで対応していくのが一般的な手法になるのでしょうか？
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### 試したこと
|
|
30
|
+
|
|
31
|
+
てっきりIDセレクタによる指定が誤っていたのかと思い、
|
|
32
|
+
|
|
33
|
+
「button」と「p」タグ両方に「color」の指定を与えましたが、
|
|
34
|
+
|
|
35
|
+
「p」タグの文字色については変更されるため、「user agent stylesheet」によって上書きされているものと思われます。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
また、IDセレクタではなく「user agent stylesheet」と同じく、
|
|
40
|
+
|
|
41
|
+
要素セレクタで指定した場合においては、こちらの要素セレクタが反映されることを確認しております。
|
|
22
42
|
|
|
23
43
|
|
|
24
44
|
|
|
@@ -31,6 +51,8 @@
|
|
|
31
51
|
<section id="top-wrapper">
|
|
32
52
|
|
|
33
53
|
<div class="container">
|
|
54
|
+
|
|
55
|
+
<p>継承テスト</p>
|
|
34
56
|
|
|
35
57
|
<button class="btn signup">新規登録はこちら</button>
|
|
36
58
|
|
|
@@ -48,7 +70,7 @@
|
|
|
48
70
|
|
|
49
71
|
#top-wrapper{
|
|
50
72
|
|
|
51
|
-
color: r
|
|
73
|
+
color: red;
|
|
52
74
|
|
|
53
75
|
|
|
54
76
|
|
|
@@ -58,19 +80,13 @@
|
|
|
58
80
|
|
|
59
81
|
|
|
60
82
|
|
|
83
|
+
|
|
84
|
+
|
|
61
85
|
### ブラウザ上の表示
|
|
62
86
|
|
|
63
|
-
|
|
64
88
|
|
|
65
89
|
|
|
66
|
-
|
|
67
|
-
### 試したこと
|
|
68
|
-
|
|
69
|
-
上記で記載してしまいましたが、
|
|
70
|
-
|
|
71
|
-
要素セレクタ「button{}}で「color」を指定した場合においては、
|
|
72
|
-
|
|
73
|
-
ベンダープレフィックスよりも優先されて反映されていることを確認しております。
|
|
74
90
|
|
|
75
91
|
|
|
76
92
|
|