CSS-Selektor

巴扎黑
Freigeben: 2017-06-26 11:54:20
Original
1706 Leute haben es durchsucht

CSS-Selektor ist ein Tool, das Stile auswählen kann. Es eignet sich für Dateien dieses Typs, unabhängig davon, ob es sich um internen Code oder externe Referenz abc.css handelt.

  1. Basic Selector
    *{ } ist ein einfacher *, was bedeutet, dass er nicht für personalisierte und detaillierte Seiten geeignet ist. Der Nebeneffekt ist, dass er den ursprünglichen Stil überschreibt oder schlecht
    * Es hat nichts mit Vererbung zu tun, es wird von * (Gott-ähnlich)
    p{ } Elementselektor beeinflusst , oder Label-Selektor. p kann ein beliebiger anderer Tag

    #123{ }-ID-Selektor sein, z. B. Derselbe Stil wie die 123css-Datei< ;/a> id kann ein beliebiger Buchstabe oder eine beliebige Zahl sein und ist die Norm
    .abc{ } Wenn das Attribut class=abc im Tag vorhanden ist, werden diese Tags als dieselbe Klasse bezeichnet > Klassen-CSS ist eine bequeme Möglichkeit, den Stil auf mehrere Tags anzuwenden.

    p.abc{ } Beschränken Sie das p-Tag in der abc-Klasse, damit es wirksam wird

    Beispiel:

    HTML-Datei

    CSS-Datei

    Effekt

    class=abc Alle b-Tags in

    Ein Tag bezieht sich auf mehrere Klassenstile. Trennen Sie zwei Klassenstile mit Leerzeichen


    [href]{ } Dies ist der Attributselektor, der Hyperlink für alle Attributbereiche in den geschweiften Klammern

    [type=password] { } Dies ist eine weitere Bedingung, dass CSS nur angewendet werden kann, wenn es sich um ein Typattribut handelt und zum Typ „Passwort“ gehört

    [href^=http] Das Attribut ist href und der Wert Wenn es mit http beginnt, verwenden Sie CSS.

    [href$=.cn] Wenn das Attribut href ist und der Wert mit .cn endet , CSS verwenden

    [href*=baidu] Der Attributwert enthält das Zeichen Baidu Fragment, CSS für Fuzzy-Suche anwenden '

    HTML-Datei

    CSS-Datei

    Effekt

    Andere Selektoren:

    [class ~=def] Der Wert eines Attributs enthält komplexe oder mehrere Zeichen und das Anwendungs-CSS, das den angegebenen Zeichen entspricht

    CSS-Selektor

  2. Zusammengesetzter Selektor
    p,b,span{ } Multi-Element-Selektor ID und Klasse….

    p b{ } Fuzzy Geben Sie das Unter-Tag eines bestimmten Tags als CSS-Anwendungsobjekt an. Mit Ausnahme des angegebenen Unter-Tags sind andere übergeordnete Tags nicht betroffen

    p >b { } Genau Ein Unterschied zu den oben genannten besteht darin, dass es das b-Sub-Tag angibt, das unter p fungiert , und es gibt b unter span, dann sollte p>b in p>span>b geändert werden

    p+b{ } } Passen Sie das p-Element und das b-Element an daneben

    p~b{ } Entspricht allen Elementen von p bis b (einschließlich p und b) und allen Elementen zwischen den beiden Punkten.

  3. Pseudo- element selector

    ::first-line{ } block Auf die erste Zeile der Ebene anwenden. Wenn das Fenster gestreckt wird, ändert sich die Anzahl der Wörter in der ersten Zeile, es wurde jedoch festgelegt, dass CSS erforderlich ist auf die erste Zeile angewendet werden, unabhängig davon, wie das Fenster gezogen wird, werden die roten Wörter
    in neue Zeilen eingefügt, wenn sich die Fenstergröße für die erste Zeile des HTML-Codes ändert die erste Zeile von

    , aber es hat keine Auswirkung auf Inline wie

    p::first-line{ } in. Nur die erste Zeile von p hat eine Auswirkung >

    Die untere Hälfte des Bildes oben ist der von eingeschlossene Inhalt.

    ::first-letter Block-level erstes Zeichen Anwendungs-CSS

    a::before Einfügen Geben Sie die Zeichenfolge vor der Beschriftung an

    a::afoter Fügen Sie die angegebene Zeichenfolge nach der Bezeichnung

    HTML-Datei

    CSS-Datei

    Vor dem Klicken

    Nach dem Klicken

Das obige ist der detaillierte Inhalt vonCSS-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage