質問編集履歴
1
「ベンダープレフィックス」ではなく「user agent stylesheet」による上書きだったため、タイトルと質問内容を変更いたしました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
「user agent stylesheet」と詳細度について質問がございます
|
body
CHANGED
|
@@ -1,20 +1,31 @@
|
|
|
1
1
|
### 実現・質問したいこと
|
|
2
|
+
IDセレクタで指定したbuttonタグのCSSが「user agent stylesheet」によって上書きされてしまいました。
|
|
3
|
+
しかし「user agent stylesheet」によるセレクタの指定は要素セレクタであり、
|
|
2
|
-
IDセレクタ
|
|
4
|
+
IDセレクタの方が詳細度が強いと認識しております。
|
|
3
|
-
ベンダープレフィックスで上書きされてしまいました。
|
|
4
|
-
しかしながら、要素セレクタで指定した場合においては上書きされませんでした。
|
|
5
5
|
|
|
6
|
-
何故、詳細度で下回っているはずの要素セレクタが優先されたのでしょうか？
|
|
6
|
+
**何故、詳細度で下回っているはずの要素セレクタが優先されたのでしょうか？**
|
|
7
7
|
|
|
8
|
-
また、buttonタグは
|
|
8
|
+
また、buttonタグは「user agent stylesheet」が効いてしまい、
|
|
9
|
+
全体に設定したCSSが上書きされてしまう為、
|
|
9
10
|
他のタグに比べて少々扱いづらい印象を受けてしまうのですが、
|
|
10
|
-
リセットCSSで対応するのが一般的な手法になるのでしょうか？
|
|
11
11
|
|
|
12
|
+
こちらはリセットCSSで対応していくのが一般的な手法になるのでしょうか？
|
|
12
13
|
|
|
14
|
+
|
|
15
|
+
### 試したこと
|
|
16
|
+
てっきりIDセレクタによる指定が誤っていたのかと思い、
|
|
17
|
+
「button」と「p」タグ両方に「color」の指定を与えましたが、
|
|
18
|
+
「p」タグの文字色については変更されるため、「user agent stylesheet」によって上書きされているものと思われます。
|
|
19
|
+
|
|
20
|
+
また、IDセレクタではなく「user agent stylesheet」と同じく、
|
|
21
|
+
要素セレクタで指定した場合においては、こちらの要素セレクタが反映されることを確認しております。
|
|
22
|
+
|
|
13
23
|
### 該当のソースコード
|
|
14
24
|
|
|
15
25
|
```html
|
|
16
26
|
<section id="top-wrapper">
|
|
17
27
|
<div class="container">
|
|
28
|
+
<p>継承テスト</p>
|
|
18
29
|
<button class="btn signup">新規登録はこちら</button>
|
|
19
30
|
<button class="btn facebook">Facebookで登録</button>
|
|
20
31
|
<button class="btn twitter">Twitterで登録</button>
|
|
@@ -23,18 +34,15 @@
|
|
|
23
34
|
```
|
|
24
35
|
```css
|
|
25
36
|
#top-wrapper{
|
|
26
|
-
color:
|
|
37
|
+
color: red;
|
|
27
38
|
|
|
28
39
|
}
|
|
29
40
|
```
|
|
30
41
|
|
|
42
|
+
|
|
31
43
|
### ブラウザ上の表示
|
|
32
|
-
|
|
33
45
|
|
|
34
|
-
### 試したこと
|
|
35
|
-
上記で記載してしまいましたが、
|
|
36
|
-
要素セレクタ「button{}}で「color」を指定した場合においては、
|
|
37
|
-
ベンダープレフィックスよりも優先されて反映されていることを確認しております。
|
|
38
46
|
|
|
39
47
|
### 補足情報（FW/ツールのバージョンなど）
|
|
40
48
|
VSCODE：1.39.2
|