質問: ### 実現・質問したいこと IDセレクタで指定したbuttonタグのCSSが「user agent stylesheet」によって上書きされてしまいました。 しかし「user agent stylesheet」によるセレクタの指定は要素セレクタであり、 IDセレクタの方が詳細度が強いと認識しております。 **何故、詳細度で下回っているはずの要素セレクタが優先されたのでしょうか?** また、buttonタグは「user agent stylesheet」が効いてしまい、 全体に設定したCSSが上書きされてしまう為、 他のタグに比べて少々扱いづらい印象を受けてしまうのですが、 こちらはリセットCSSで対応していくのが一般的な手法になるのでしょうか? ### 試したこと てっきりIDセレクタによる指定が誤っていたのかと思い、 「button」と「p」タグ両方に「color」の指定を与えましたが、 「p」タグの文字色については変更されるため、「user agent stylesheet」によって上書きされているものと思われます。 また、IDセレクタではなく「user agent stylesheet」と同じく、 要素セレクタで指定した場合においては、こちらの要素セレクタが反映されることを確認しております。 ### 該当のソースコード ``` 継承テスト 新規登録はこちら Facebookで登録 Twitterで登録 ``` ``` #top-wrapper{ color: red; } ``` ### ブラウザ上の表示 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1605f9a6fde1faee49cb8e875cb0b6b6.png) ### 補足情報(FW/ツールのバージョンなど) VSCODE:1.39.2 OS:Windows10 Home(64bit) ブラウザ:Google chrome 78.0.3904.97(Official Build) (64 ビット)
回答: 要素自体が持ち合わせているプロパティに関しては、親要素から継承されないようです。 buttonタグは上記の画像で確認できる通り、22個ものプロパティを持っており、 その中に「color」プロパティが含まれるため、親要素からの「color」プロパティは継承されませんでした。