Detaillierte Kenntnisse über CSS-Selektoren-CSS-Tutorial-php.cn

Detaillierte Kenntnisse über CSS-Selektoren

迷茫

Freigeben： 2017-03-25 14:01:41

Original

1516 Leute haben es durchsucht

So importieren Sie ein externes CSS-Stylesheet

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");

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>

Nach dem Login kopieren

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ä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

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 #

muss vor dem ID-Selektor hinzugefügt werden

. ist ein Element, das dem Klassenwert entspricht. Das Symbol .myclass muss vorangestellt werden. Beispielsweise stellt class alle Elemente dar, deren myclass-Wert

ist.

p.important{color:red;}Klassenselektoren können in Verbindung mit Elementselektoren verwendet werden.

Elemente müssen beispielsweise die Bedingungen beider Selektoren erfüllen, um wirksam zu werden.

enthält Selektoren und Nachkommenselektoren

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

Untergeordneter Selektor

ähnelt dem Nachkommenselektor, wirkt sich jedoch nur auf bestimmte direkte Nachkommen des Elements aus. Beispielsweise wirkt

auf das h1>strong{color:red;}-Element der ersten Ebene im h1-Element, und andere Ebenen sind nicht betroffen strong

Angrenzender Geschwisterselektor

Wenn Sie eine Auswahl treffen müssen Ein anderes Element direkt Für Elemente nach einem Element und beide haben das gleiche übergeordnete Element, Sie können den angrenzenden Geschwisterselektor verwenden. Beispielsweise wählt

den Absatz aus, der unmittelbar nach dem h1-Element erscheint übergeordnetes Element h1+p{margin-top:50px;}

Selektorgruppierung

Selektoren, die gleichzeitig auf mehrere Elemente einwirken.

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

Pseudoelement-Selektor

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

after , before kann mit

p:before{
    content:url("img.png");}

Nach dem Login kopieren

verwendet werden,

kann mit der Einstellung des Anführungszeichentyps verschachtelter Referenzen quotesquotes verwendet werden

danach, vorher kann mit Zählern verwendet werden

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }</style>

Nach dem Login kopieren

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
n ist
even
n, wenn n ist
m*n+p

:nth-last-child(n)
:only-child

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!