Heim >Web-Frontend >CSS-Tutorial >Detaillierte Kenntnisse über CSS-Selektoren
Detaillierte Kenntnisse über CSS-Selektoren
- 迷茫Original
- 2017-03-25 14:01:411519Durchsuche
So importieren Sie ein externes CSS-Stylesheet
Verwenden Sie den Link-Tag, um ein externes CSS-Stylesheet zu importieren
ffd44f9d753d16fbc49420bd2e72052bIn Stil Importieren (importieren) Sie in der Tabelle ein externes Stylesheet
@import url("/crazy-html5/06css/css/demo01.css");
Internes Stylesheet verwenden
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>Wissenspunkte auswählen
Elementattributselektor
Gewöhnlicher Tag-Selektor
table:{background:red;}Ein Tag, der ein bestimmtes Attribut enthält
p[id]{background:red;}Stellt ein p-Element dar, das ein ID-Attribut enthältEin 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 beginntEin 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
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 -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");} verwendet werden, 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
- Der Selektor entspricht dem Dokumentstammelement
:rootGibt an, wann das Element ist ist Der Stil des ersten untergeordneten Elements seines übergeordneten Elements :first-child gibt den Stil an, wenn das Element das letzte untergeordnete Element seines übergeordneten Elements ist -
:last-child Gibt einen Stil an, wenn das Element das n-te untergeordnete Element seines übergeordneten Elements ist. :nth-child(n)n ist. -
n istodd entspricht dem Stil von -
n, wenn n isteven , stimmt überein, wenn das Element sein übergeordnetes Element ist, das übereinstimmt Der Stil des m*n+p-Kindelements m*n+p:nth-last-child(n) gibt den Stil an, der wirksam wird, wenn das Element das einzige untergeordnete Element seines übergeordneten Elements ist :only-child gibt den Stil des leeren Elements an
- Entspricht, wenn das Element ein ungerades untergeordnetes Element seines übergeordneten Elements ist. Der Stil von
Pseudoklassenselektor für Elementstatus
: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!