So verwenden Sie CSS-Stile und -Selektoren

<p style="font-size:20px; color:red">hallo</p>

<Stil>
    p{Schriftgröße: 20px;Farbe: rot}    
</Stil>

p{Schriftgröße: 20px;Farbe: rot}
<link href="xxx.css" type="text/css" rel="stylesheet" />

p{color: red} /* Elementselektor, Stile für alle p-Elemente festlegen*/
.red{color: red} /* Klassenselektor, referenziert im Element durch class="red"*/
#user{color: red} /* ID-Selektor, referenziert in einem Element durch id="user", kann höchstens einmal verwendet werden*/

*{color: red} /*Universeller Selektor, legt Stile für alle Elemente fest*/
h1,.red{color: red} /*Gruppieren Sie Selektoren und legen Sie für mehrere Selektoren gleichzeitig den gleichen Stil fest*/

div p{color: red} /*Nachkommenselektor, wählt alle <p>-Elemente in <div> aus, unabhängig davon, ob <p> der Sohn, Enkel, Urenkel ist...solange <p> der Nachkomme von <div> ist*/
div>p{color:red} /*Kindselektor, wählt <p> aus, <p> muss das Kind von <div> sein*/
div+p{color:red} /*Benachbarter Geschwisterselektor, wählt <p> aus, <p> muss das erste Geschwisterelement nach <div> sein*/
div~p{color:red} /*Anschließender Geschwisterselektor, wählt alle <p>-Elemente nach <div> aus, <p> muss ein Geschwisterelement von <div> sein*/

[attr] /*Enthält attr-Attribut*/
[attr=Wert] /*hat das Attribut attr und der Attributwert ist Wert*/
[attr^=value] /*Es gibt ein attr-Attribut und der Attributwert beginnt mit value (solange value damit beginnt, ist es ok*/
[attr|=value] /*Es gibt ein attr-Attribut, und der Attributwert beginnt mit value, und der Wert und der folgende Teil sind mit -* verbunden/
[attr$=value] /*Es gibt ein attr-Attribut und der Attributwert endet mit value*/
[attr*=Wert] /*Es gibt ein attr-Attribut und der Attributwert enthält einen Wert (es ist OK, wenn es einen Wert enthält)*/
[attr~=value] /*Es gibt ein attr-Attribut und das Attribut value enthält das Wort value. Value muss ein vollständiges Wort sein (durch Leerzeichen von anderen Wörtern getrennt)*/

button[type="button"] /*Alle <button> mit type="button" auswählen */

a:link /*alle nicht besuchten <a>* Elemente/
a:hover /*Bewegen Sie die Maus zum <a>-Element*/
a:active /*Wenn auf <a> geklickt wird*/
a:visited /*Alle besuchten <a>*/

:focus /*Beim Fokussieren*/
:checked /*Wenn ausgewählt*/
:aktiviert /*Verfügbar*/
:deaktiviert /*deaktiviert*/
:read-only /*Nur lesen*/

:Fokus{ }
Eingabe:Fokus{ }

:empty{ } /*alle leeren Elemente*/
p:empty{ } /*alle leeren <p> Elemente*/

p:first-of-type /*Das erste <p> auf derselben Ebene*/
p:nth-of-type(n) /*Das n-te <p> derselben Ebene*/
p:nth-last-of-type(n) /*Das n-te letzte <p> auf derselben Ebene*/
p:last-of-type /*Das letzte <p> auf derselben Ebene*/
p:only-of-type /*Der Einzige auf derselben Ebene<p>*/

p:erster-vom-Typ{Farbe:rot}

<Text>
    <h1></h1>
    <p></p> <!--Auswählen-->
    <p></p>
    <div>
        <h2></h2>
        <p></p> <!--Auswählen-->
        <p></p>
    </div>
</body>

p:first-child /*Entspricht <p>, <p> muss das erste Kindelement seines Elternelements sein*/
p:nth-child(n) /*Entspricht <p>, <p> muss das n-te Kindelement seines Elternelements sein*/
p:nth-last-child(n) /*Entspricht <p>, dem n-ten letzten Kindelement seines Elternelements*/
p:last-child /*Entspricht <p>, das das letzte untergeordnete Element seines übergeordneten Elements sein muss*/
p:only-child /*Entspricht <p>, <p> muss das einzige untergeordnete Element seines übergeordneten Elements sein*/

p:erstes-Kind{Farbe:rot}

<Text>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p> <!--Auswählen-->
        <p></p>
    </div>
</body>

p:before{ /*Inhalt vor <p> hinzufügen*/
    Inhalt: „Hallo“
}
p:after{ /*Inhalt nach <p> hinzufügen*/
    Inhalt: „Tschüss“
}

p:before{ /*Inhalt vor <p> hinzufügen*/
    Inhalt: „Hallo“;
    Anzeige: Block
}
p:after{ /*Inhalt nach <p> hinzufügen*/
    Inhalt: „Tschüss“;
    Anzeige: Block
}

p:vor{   
    content:"hallo "; /*Attribute sind durch Semikolon getrennt*/
    Anzeige: Block; /*Stil für den hinzugefügten Inhalt festlegen*/
    Schriftgröße: 20px;
    Farbe: rot
}

p:vor{   
    content:""; /* Das Inhaltsattribut ist erforderlich und kann auf eine leere Zeichenfolge gesetzt werden, wenn kein Text hinzugefügt wird*/
    display: block; /*Muss auf Blockebene eingestellt werden, Breite und Höhe müssen festgelegt werden, dann kann das hinzugefügte Hintergrundbild angezeigt werden*/
    Breite: 100px;
    Höhe: 100px
    Hintergrundbild: url("1.png");
}

p:vor{   
    Inhalt:"";   
    klar: beides
}

:vor <=> ::vor
:nach <=> ::nach