CSS-Selektor nach Klasse

Question

Ich bin ein totaler Anfänger in CSS, und ich stieß auf den folgenden Code, den ich nicht verstehe.

.single-product h2 { 
    font-size: 18px; 
    line-height: 25px; 
    margin-bottom: 10px; 
    margin-top: 15px; 
} 
.single-product h2 a { 
    color: #222; 
} 
.single-product p { 
    color: #1abc9c; 
    font-weight: 700; 
} 

Was ist der Unterschied zwischen, sagen wir, h2.single-product {}, verglichen mit dem obigen Code?

Answer 1

• h2.single-product Streichhölzer h2-Elemente mit der Klasse Einzelprodukt
• .single-product h2 Streichhölzer h2-Elemente, die mit der Klasse Einzelprodukt

Siehe unten die Beispiele gelten für jeweils innerhalb jedes Element sind.

<!-- first declaration --> 
    <h2 class="single-product">Testberichte</h2> 

    <!-- second declaration -->  
    <div class="single-product"> 
     <h2>hi</h2> 
    </div> 

Answer 2

Für

h2.single-product {} 

Einzelprodukt Klasse Eigenschaft zeigt seine Wirkung, wenn es in jedem h2 Tag ist.

Für

.single-product h2 

Eigentum von h2 Tag funktioniert nur, wenn es in Einzelprodukt Klasse ist

Answer 3

'h2.single-Produkt' wird die folgende Art zu gilt a h2 Element, das die Klasse Einzelprodukt hat.

'.single-product h2' wendet den Stil auf ein h2-Element an, das ein untergeordneter Knoten eines Elements mit der Klasse single-product ist.

Das Leerzeichen in CSS ist ein Selektor für sich selbst, genannt "Kind Knoten" Selektor; genau wie das "." Charakter wird der "Klassen" Selektor genannt.