CSS HTMLセレクタとクラスセレクタ

Question

こんにちは、 CSS HTMLセレクタとクラスセレクタを使用しているときに私は奇妙な動作を見ました。

<div class="content"> 
    <h1>Registration Form</h1> 
</div> 

とCSSファイル内の私が持っている：私はこのコードを持っているHTMLファイル内 コードの上に

.content 
{ 
    margin:auto; 
    width:600px; 
    border:solid 1px black; 
    background-color:White; 
    padding:10px; 
} 

h1 
{ 
    color:Gray; 
    font-size:18px; 
    border-bottom:solid 1px orange; 
} 

は完璧に動作します。 h1 HTMLセレクタをクラスセレクタに変更したときに、.hとh1 class="h"が完璧に機能しました。

私はdivに.contentクラスセレクタを変更 は、出力が変化（すなわち、IはDIV HTMLセレクタ自体にdivタグのクラスセレクタを変換しました）。 テキスト登録フォームは表示されませんでしたが、登録フォームテキストが存在する領域の上下に水平線が表示されました。 なぜこの奇妙な動作ですか？

SAMEスタイルのルールエフェクトを適用しても、クラスセレクタとHTMLセレクタが異なる動作をすることは証明されていますか？

Answer 1

クラスセレクタは型セレクタよりも具体的です。

タイプセレクタをクラスセレクタに変更すると、最初のセレクタが優先されます。

ファーストクラスのセレクタをタイプセレクタに変更すると、2番目のセレクタがより具体的になり、優先されます。