简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Kenntnisse über CSS-Selektoren

Detaillierte Kenntnisse über CSS-Selektoren

迷茫
迷茫Original
2017-03-25 14:01:411436Durchsuche

So importieren Sie ein externes CSS-Stylesheet

  1. Verwenden Sie den Link-Tag, um ein externes CSS-Stylesheet zu importieren
    ffd44f9d753d16fbc49420bd2e72052b

  2. 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>

Wissenspunkte auswählen

Elementattributselektor

  1. Gewöhnlicher Tag-Selektor
    table:{background:red;}

  2. Ein Tag, der ein bestimmtes Attribut enthält
    p[id]{background:red;}Stellt ein p-Element dar, das ein ID-Attribut enthält

  3. 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.

  4. 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

  5. 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 -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

  1. Legen Sie einen speziellen Stil für die erste Textzeile fest:first-line{color:red;}

  2. 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");}
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>

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

  1. :root

    2. Gibt an, wann das Element ist ist Der Stil des ersten untergeordneten Elements seines übergeordneten Elements

  2. :first-child

    3. gibt den Stil an, wenn das Element das letzte untergeordnete Element seines übergeordneten Elements ist

  3. :last-child

    4. Gibt einen Stil an, wenn das Element das n-te untergeordnete Element seines übergeordneten Elements ist.

  4. :nth-child(n)

    5. n ist.
      Entspricht, wenn das Element ein ungerades untergeordnetes Element seines übergeordneten Elements ist. Der Stil von

    1. odd

      n ist
      2. entspricht dem Stil von

    2. even

      n, wenn n ist
      3. , stimmt überein, wenn das Element sein übergeordnetes Element ist, das übereinstimmt Der Stil des m*n+p-Kindelements

    3. m*n+p

    gibt an, wann das Element das n-te Kind vom unteren Ende seines übergeordneten Elements ist. Der Stil von

  5. :nth-last-child(n)

    6. gibt den Stil an, der wirksam wird, wenn das Element das einzige untergeordnete Element seines übergeordneten Elements ist

  6. :only-child

    7. gibt den Stil des leeren Elements an

Pseudoklassenselektor für Elementstatus

  1. :hoverStil, wenn sich der Mauszeiger auf dem Element befindet

  2. :focusStil für das fokussierte Element

  3. :enabledStil für das aktivierte Element

  4. :disabledStil für das deaktivierte Element

  5. :checkedDer Stil des ausgewählten Elements (Kontrollkästchen, Radio)

  6. ::selectionDer Stil einiger vom Benutzer ausgewählter Elemente

  7. :not(selector)Wählen Sie einen Stil aus, der nicht dieser Selektor ist

  8. :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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der CSS-Änderung des Eingabestils für Einzelauswahl und MehrfachauswahlNächster Artikel：Detaillierte Erläuterung der CSS-Änderung des Eingabestils für Einzelauswahl und Mehrfachauswahl

In Verbindung stehende Artikel

Mehr sehen