「user agent stylesheet」と詳細度について質問がございます

Question

実現・質問したいこと

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」と同じく、
要素セレクタで指定した場合においては、こちらの要素セレクタが反映されることを確認しております。

該当のソースコード

    <section id="top-wrapper">
        <div class="container">
            <p>継承テスト</p>
            <button class="btn signup">新規登録はこちら</button>
            <button class="btn facebook">Facebookで登録</button>
            <button class="btn twitter">Twitterで登録</button>
        </div>
    </section>

#top-wrapper{
    color: red;

}

ブラウザ上の表示

補足情報（FW/ツールのバージョンなど）

VSCODE：1.39.2
OS:Windows10 Home(64bit)
ブラウザ：Google chrome 78.0.3904.97（Official Build） （64 ビット）

Comments

[kei344]

画像に書かれているものなら「ベンダープレフィックス」ではなく、少なくとも「デフォルトスタイルシート」です。

[a2606]

コメントありがとうございます。
ブラウザが勝手に追加するCSSのことをすべて「ベンダープレフィックス」だと勘違いしておりましたが、
こちらは「user agent stylesheet」の誤りでした。

しかしながら、「user agent stylesheet」にて自動追加された「button:{}」によって、
「#top-wrapper」が上書きされるのが分かりません。
詳細度計算では、idセレクタによる指定は要素セレクタよりも強いと認識しております。

Answer 1

#top-wrapper .btn {
    color: rgba(255,255,255, 0.7);
}
```**動くサンプル：**[https://jsfiddle.net/01n7vwc9/](https://jsfiddle.net/01n7vwc9/)

Comments

[kei344]

ボタンに直接指定すれば良いだけのような。リンクカラーなどと同じように値の継承でなく直接指定が必要な要素もあります。

Answer 2

要素自体が持ち合わせているプロパティに関しては、親要素から継承されないようです。

buttonタグは上記の画像で確認できる通り、22個ものプロパティを持っており、
その中に「color」プロパティが含まれるため、親要素からの「color」プロパティは継承されませんでした。