Heim  >  Artikel  >  Web-Frontend  >  So wählen Sie Elemente in CSS aus

So wählen Sie Elemente in CSS aus

藏色散人
藏色散人Original
2021-04-29 09:41:332463Durchsuche

So wählen Sie Elemente in CSS aus: Erstellen Sie zunächst eine HTML-Beispieldatei. Erstellen Sie dann einen mehrzeiligen Text im Textkörper. Verwenden Sie anschließend den Selektor „:nth-of-type(n)“ oder „:last-child“. Element auswählen.

So wählen Sie Elemente in CSS aus

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Um mit CSS eine Eins-zu-Eins-, Eins-zu-Viele- oder Viele-zu-Eins-Kontrolle über Elemente in einer HTML-Seite zu erreichen, müssen Sie CSS-Selektoren verwenden. Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert.

Wie wähle ich Elemente in CSS aus?

CSS kann den :nth-of-type(n)-Selektor oder den :last-child-Selektor verwenden, um Elemente auszuwählen. Der :nth-of-type(n)-Selektor stimmt mit dem n-ten Geschwisterelement desselben Typs überein. Der :last-child-Selektor stimmt mit jedem Element überein, das das letzte untergeordnete Element seines übergeordneten Elements ist.

Beispiel für die Auswahl von Elementen mit dem :n-ten-Typ-Selektor:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>

Rendering:

So wählen Sie Elemente in CSS aus

Beispiel für die Auswahl von Elementen mit dem Last-Child-Selektor:

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>

Rendering:

So wählen Sie Elemente in CSS aus

Weitere Details für HTML/ Wenn Sie über CSS-Kenntnisse verfügen, besuchen Sie bitte die Rubrik „CSS-Video-Tutorial“!

Das obige ist der detaillierte Inhalt vonSo wählen Sie Elemente in CSS aus. 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