Heim > Web-Frontend > CSS-Tutorial > CSS3: So verwenden Sie den First-Child-Selektor

CSS3: So verwenden Sie den First-Child-Selektor

青灯夜游
Freigeben: 2019-05-31 11:56:29
Original
4338 Leute haben es durchsucht

CSS: First-Child-Selektor wird verwendet, um das erste untergeordnete Element in seinem übergeordneten Element abzugleichen. Das heißt, ein Element wird nur dann abgeglichen, wenn es das erste untergeordnete Element seines übergeordneten Elements ist.

CSS3: So verwenden Sie den First-Child-Selektor

Wie verwende ich CSS3: First-Child-Selektor?

: Der Selektor für das erste untergeordnete Element stimmt mit dem ersten untergeordneten Element innerhalb seines übergeordneten Elements überein.

Syntax:

元素:first-child
{ 
css样式
}
Nach dem Login kopieren

Beispiel: Übereinstimmung mit dem ersten

-Element des übergeordneten Elements von

Hinweis:

Alle gängigen Browser unterstützen den :first-child-Selektor. Für :first-child in IE8 und früheren Browsern muss deklariert werden.

Beispiel für die Verwendung von CSS: First-Child-Selektor

Beispiel 1:

Wählen Sie jedes

aus Legen Sie seinen Stil für jedes -Element fest, wobei das

-Element das erste untergeordnete Element seines übergeordneten Elements ist:

p:first-child
{ 
    background-color:yellow;
}
Nach dem Login kopieren
Rendering:


CSS3: So verwenden Sie den First-Child-SelektorBeispiel 2:

Der für das erste untergeordnete Element jedes
    -Elements ausgewählte Stil

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p:first-child i
    {
    background:yellow;
    }
    </style>
    </head>
    <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    </body>
    </html>
    Nach dem Login kopieren
    Rendering:


    Das obige ist der detaillierte Inhalt vonCSS3: So verwenden Sie den First-Child-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 Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage