Welche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in gängige CSS-Selektoren

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS-Selektoren. Welche Arten gibt es? Eine kurze Einführung in häufig verwendete CSS-Selektoren hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

CSS-Tag-Selektor

Funktion: Alle angegebenen Elemente auf der Seite auswählen

Syntax: Tag-Name: {}

ID-Selektor

Funktion: Wählen Sie das einzige Element im Element über seinen ID-Attributwert aus

Syntax: #id{}

CSS-Klasse Selektor

Funktion: Wählen Sie eine Gruppe von Elementen über den Klassenattributwert des Elements aus.

Syntax: .class-Attributwert {}

kann für ein Element festgelegt werden gleichzeitig Mehrere Klassenattributwerte, durch Leerzeichen getrennt

Selektorgruppierung (Vereinigungsselektor)

Funktion: Selektorgruppierung kann gleichzeitig verwendet werden Wählen Sie entsprechende Elemente aus mehrere Selektoren

Syntax: Selektor 1, Selektor 2, Selektor N{}

Beispiel: Wählen Sie die ID als p3 aus und der Klassenattributwert enthält p2- und h1-Tags

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

CSS-Platzhalterselektor

Funktion: Alle Elemente auf der Seite auswählen

Syntax: *{}

CSS-Schnittpunktselektor (zusammengesetzter Selektor )

Funktion: Sie können Elemente auswählen, die mehrere Selektoren gleichzeitig erfüllen

Syntax: Selektor 1 Selektor 2 Selektor N{ }

Hinweis: Weil id kann ein Element eindeutig bestimmen, verwenden Sie nicht den Schnittpunktselektor für id

Beispiel: Wählen Sie das Element span

span.p4{
                                    background-color:#4169E1;
                           }

aus, dessen Klassenattributwert p4 enthält. Die Beziehung zwischen:

Parent Element: ein Element, das direkt untergeordnete Elemente enthält.

Untergeordnetes Element: ein Element, das direkt im übergeordneten Element enthalten ist.

Vorfahrenelement: Ein Element, das direkt oder kurzzeitig Nachkommenelemente enthält. Das übergeordnete Element ist auch ein Vorfahrenelement.

Nachkommende Elemente: Elemente, die direkt oder indirekt in Vorgängerelementen enthalten sind, und untergeordnete Elemente sind ebenfalls Nachkommenelemente.

Geschwisterelemente: Elemente mit demselben übergeordneten Element.

CSS-Nachkommenelementselektor

Funktion: Wählen Sie die Nachkommenelemente des angegebenen Elements aus

Syntax: Nachkommenelement des Vorfahrenelements {}

Beispiel: Spanne in div auswählen

  div span {
                                        color: chartreuse;
                                }

CSS-Selektor für untergeordnete Elemente (nicht unterstützt von IE6 und niedrigeren Browsern)

Funktion: Wählen Sie das angegebene übergeordnete Element aus 🎜>

Syntax: übergeordnetes Element> untergeordnetes Element

Beispiel: Wählen Sie den Pseudoklassenselektor span

                 div>span{
                              background-color: yellow;
                     }

in einem div aus, um einen speziellen Elementstatus darzustellen.

Zum Beispiel: besuchte Hyperlinks, normale Hyperlinks, fokussierte Textfelder

Wenn wir Stile für Elemente in diesen speziellen Zuständen festlegen müssen, können wir sie verwenden. Der durch das Pseudo definierte Stil -Klasse für die Verbindung

Normaler Link: a:link

Besuchter Link: a:visited (nur Farbe definierbar)

Der Link, über den die Maus gleitet: a:hover

Der angeklickte Link: a:active

Die Reihenfolge zwischen a:link und a:visited ist nicht angegeben, sie müssen jedoch vor a:hover und a:active stehen. a:hover muss vor a:active

hover stehen und active kann auch für andere Elemente wie p:hover p:active festgelegt werden, aber ie6 und niedriger unterstützen

< nicht 🎜> andere Pseudoklasse:

:focus Fokus abrufen

:before Vor der Angabe des Elements

:after Nach der Angabe des Elements

: :selection Das ausgewählte Element (Es sollte in Firefox so verwendet werden::-moz-selection)

Verwenden Sie Pseudoelemente, um einige spezielle Positionen im Element darzustellen

: erster Buchstabe: das erste Zeichen

:fist-line: Die erste Zeichenzeile

:before: Stellt den vorderen Teil des Elements dar

Im Allgemeinen vorher muss in Verbindung mit dem Inhaltsstil verwendet werden,

Sie können durch den Inhalt

:after : Stellt die letzte Seite des Elements dar

Sie können der Position davor oder danach etwas Inhalt hinzufügen

Setzen Sie das erste Zeichen im p-Tag auf Gelb 25px

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

CSS-Attributauswahl

Funktion: Sie können das angegebene Element basierend auf dem Attribut oder Attribut auswählen Wert im Element

Syntax: [Attributname] Auswahl Elemente mit angegebenen Attributen

[Attributname=Attributwert] Elemente mit angegebenen Attributwerten auswählen

[Attribut name^=Attributwert] Wählen Sie Elemente aus, deren Attributwerte mit dem angegebenen Inhalt beginnen

[Attributname$=Attributwert] Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Inhalt endet

[Attribut value*=Attributwert] Wählen Sie Elemente aus, deren Attributwert den angegebenen Inhalt enthält

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

Pseudoklassen-Selektor für untergeordnete Elemente

:first-child : Das erste untergeordnete Element kann ausgewählt werden

:last-child : Das letzte Element kann ausgewählt werden

:nth-child : Sie können das untergeordnete Element an jeder Position auswählen

Sie können einen Parameter angeben nach diesem Selektor, um anzugeben, welches Element ausgewählt werden soll

gerade: gerade

ungerade: ungerade Zahl Ähnlich, aber xxx-child wählt aus allen Elementen aus, xxx-of-type wählt

<🎜 aus > aus dem angegebenen Typ. Beispiel: Wählen Sie das erste p-Tag

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

und wählen Sie das nächste Geschwisterelement

aus. Funktion: Sie können das angegebene Geschwisterelement

neben einem Element auswählen

语法：前一个+后一个

例：选中p标签后的相邻的兄弟span（p和span不一定相邻）

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

相关文章推荐：

什么是css？css三种样式以及文字属性的介绍

CSS布局有哪些？css常见的布局方式（附代码）

Das obige ist der detaillierte Inhalt vonWelche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in gängige CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!