Verwenden Sie den Link-Tag, um ein externes CSS-Stylesheet zu importieren<link rel="stylesheet" href="css/demo01.css">
In Stil Importieren (importieren) Sie in der Tabelle ein externes Stylesheet @import url("/crazy-html5/06css/css/demo01.css");
Das interne Stylesheet kann nur auf ein bestimmtes angewendet werden Webseite, wie man sie definiert Um das head-Tag zum style-Header hinzuzufügen, können Sie den Seitenstil im Stil-Tag hinzufügen.
<head>
<style>
table {
background: #003366;
}
</style>
</head>Gewöhnlicher Tag-Selektortable:{background:red;}
Ein Tag, der ein bestimmtes Attribut enthältp[id]{background:red;}Stellt ein p-Element dar, das ein ID-Attribut enthält
Ein Tag, der ein bestimmtes Attribut enthält, und der Attributwert ist ein bestimmter Wert p[id=aaa]{background:red;} stellt ein p-Element dar, das ein ID-Attribut und id=aaa enthält.
Ein Element p[id=^aaa]{background:red;}, das ein Attribut enthält und dessen Attributwert mit einem bestimmten Wert beginnt. Enthält das id-Attribut und der Wert der id ist ein p-Element, das mit aaa beginnt
Ein Element, das ein Attribut enthält und dessen Attributwert mit einem bestimmten Wert endet p[id=$c]{background:red;} bedeutet Es enthält das id-Attribut und der Wert von id ist ein p-Element, das mit c endet.
id-Selektor, der das Element angibt, dessen ID einen bestimmten Wert hat. Beispielsweise bedeutet #myp ein Element, bei dem id ein Element mit einem myp-Wert ist. Das Symbol #
. ist ein Element, das dem Klassenwert entspricht. Das Symbol .myclass muss vorangestellt werden. Beispielsweise stellt class alle Elemente dar, deren myclass-Wert
p.important{color:red;}Klassenselektoren können in Verbindung mit Elementselektoren verwendet werden.
Der Nachkommenselektor h1 em{color:red} kann Elemente auswählen, die Nachkommen eines bestimmten Elements sind, zum Beispiel: h1, diese Regel wählt <🎜 aus, die Nachkommen von < sind 🎜>-Element. >Der Text des Elements wird rot und andere em-Texte sind von dieser Regel nicht betroffen. em
auf das h1>strong{color:red;}-Element der ersten Ebene im h1-Element, und andere Ebenen sind nicht betroffen strong
den Absatz aus, der unmittelbar nach dem h1-Element erscheint übergeordnetes Element h1+p{margin-top:50px;}
wirkt sich beispielsweise sowohl auf das h2-Element als auch auf das p-Element aus. h2,p{color:gray;}* ist ein Platzhalter-Selektor, der mit jedem Element übereinstimmen kann
Legen Sie einen speziellen Stil für die erste Textzeile fest:first-line{color:red;}
Spezieller Stil für den ersten Buchstaben des Textes:first-letter{color:red;}
Auswahl aufheben:after、:before
Kann sein Wird mit Elementen verwendet. Der Inhalt kann mit :before{} angegeben werden. Der Inhalt kann mit content angegeben werden als :after{}content
p:before{
content:url("img.png");} kann mit der Einstellung des Anführungszeichentyps verschachtelter Referenzen quotesquotes verwendet werden
<style>
p>p {
quotes: "《" "》"
}
p>p::before{
content: open-quote;
}
p>p::after{
content:close-quote;
}</style> Anstatt einen Zähler zu verwenden, um mehrstufige Zahlen vor dem Text hinzuzufügen, kann dies ein separater Artikel sein und wird hier nicht näher beschrieben. Pseudoklassenselektor
:root
:first-child
:last-child
:nth-child(n)
odd
even
m*n+p
:nth-last-child(n)
:only-child
:hoverStil, wenn sich der Mauszeiger auf dem Element befindet
:focusStil für das fokussierte Element
:enabledStil für das aktivierte Element
:disabledStil für das deaktivierte Element
:checkedDer Stil des ausgewählten Elements (Kontrollkästchen, Radio)
::selectionDer Stil einiger vom Benutzer ausgewählter Elemente
:not(selector)Wählen Sie einen Stil aus, der nicht dieser Selektor ist
:targetWählen Sie das aktuell aktive #news-Element aus, das im Allgemeinen mit Ankern verwendet wird
Das obige ist der detaillierte Inhalt vonDetaillierte Kenntnisse über CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
