CSS HTML sélecteur vs sélecteur de classe

Question

Bonjour, J'ai vu un comportement étrange lors de l'utilisation CSS sélecteur HTML et sélecteur de classe. dans le fichier HTML je ce code:

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

Et dans le fichier Css je:

.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; 
} 

code ci-dessus fonctionne parfaitement. Lorsque j'ai changé le sélecteur HTML h1 en sélecteur de classe en écrivant .h et h1 class="h" ENCORE, cela a fonctionné parfaitement.

MAIS quand j'ai changé sélecteur de classe .content-div (c.-à-je converti sélecteur de classe de div balise DIV sélecteur HTML lui-même), la sortie a changé. Il ne m'a pas montré le texte Formulaire d'inscription et a montré des lignes horizontales au-dessus et au-dessous de la zone où le texte du formulaire d'inscription serait présent. pourquoi est ce comportement étrange? Est-ce que cela prouve que le sélecteur de classe et le sélecteur HTML se comportent différemment même s'ils sont appliqués avec l'effet de règle de style SAME?

Answer 1

Un sélecteur de classe est plus spécifique qu'un sélecteur de type.

Lorsque vous changez le sélecteur de type en un sélecteur de classe, le premier sélecteur a toujours la priorité, juste parce qu'il vient en premier.

Lorsque vous remplacez le sélecteur de première classe par un sélecteur de type, le second sélecteur devient plus spécifique et a la priorité.