Heim > Web-Frontend > CSS-Tutorial > So schließen Sie das erste untergeordnete Element in CSS aus

So schließen Sie das erste untergeordnete Element in CSS aus

青灯夜游
Freigeben: 2022-08-29 18:28:32
Original
9424 Leute haben es durchsucht

4 Methoden: 1. Verwenden Sie „:not()“ und „:first-child“, die Syntax lautet „element:not(:first-child){style}“ 2. Verwenden Sie „:nth-of-type " , die Syntax „Element:nth-of-type(n+2){style}“; 3. Verwenden Sie „:nth-child“, die Syntax „Element:nth-child(n+2){style}“; 4. Verwenden Sie den Selektor „+“ oder „~“, Syntax „element + element {style}“ oder „element ~ element {style}“.

So schließen Sie das erste untergeordnete Element in CSS aus

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

4 Möglichkeiten, das erste untergeordnete Element in CSS auszuschließen

Methode 1: Verwenden Sie die Selektoren: not() und :first-child

  • Verwenden Sie: first-child, um das erste Element auszuwählen

  • Dann verwenden Sie :not(), um andere Elemente abzugleichen, die nicht das erste untergeordnete Element sind. :not()匹配非第一个子元素的其他元素

示例:给除了第一个子元素的其他元素添加红色背景

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.dom div {
				float: left;
				height: 150px;
				line-height: 150px;
				width: 150px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			.dom  div:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<div class="dom">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>

</html>
Nach dem Login kopieren

So schließen Sie das erste untergeordnete Element in CSS aus

说明:

  • :not(selector) 选择器匹配非指定元素/选择器的每个元素。

  • :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

方法2:使用:nth-of-type()

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n是从0开始的,那么n+2自然就是从第2个元素开始了。

.dom div:nth-of-type(n+2){
background:pink;
}
Nach dem Login kopieren

So schließen Sie das erste untergeordnete Element in CSS aus

同理如果选中单数元素那么就是2n+1;如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}
Nach dem Login kopieren

So schließen Sie das erste untergeordnete Element in CSS aus

方法3:使用:nth-child()

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

方法3和方法2类型,设置()的值为“n+2”即可。

.dom div:nth-child(n+2){
background:green;
}
Nach dem Login kopieren

So schließen Sie das erste untergeordnete Element in CSS aus

方法4:使用兄弟选择符+或者~

  • + 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

  • ~

Beispiel: Fügen Sie anderen Elementen außer dem ersten untergeordneten Element einen roten Hintergrund hinzu ="https://img.php.cn/upload/image/535/585/328/166176797189820So schließen Sie das erste untergeordnete Element in CSS aus" title="166176797189820So schließen Sie das erste untergeordnete Element in CSS aus" alt="So schließen Sie das erste untergeordnete Element in CSS aus"/>

Beschreibung:

So schließen Sie das erste untergeordnete Element in CSS aus ​​

:not(selector) Der Selektor stimmt mit jedem Element überein, das nicht das angegebene Element/Selektor ist. So schließen Sie das erste untergeordnete Element in CSS aus

:first-child-Selektor wird verwendet, um den angegebenen Selektor auszuwählen, der zum ersten untergeordneten Element seines übergeordneten Elements gehört.

🎜🎜🎜Methode 2: Verwenden Sie den Selektor :nth-of-type()🎜🎜🎜:nth-of-type(n), um Elemente abzugleichen, die zu gehören das übergeordnete Element Jedes Element des N-ten Unterelements eines bestimmten Typs.🎜🎜n beginnt bei 0, dann beginnt n+2 natürlich beim 2. Element. 🎜
.dom div+div{
   background:red;
}
Nach dem Login kopieren
🎜So schließen Sie das erste untergeordnete Element in CSS aus🎜🎜 Wenn Sie ein Element mit einer ungeraden Zahl auswählen, ist 2n+1. Wenn Sie ein Element mit einer geraden Zahl auswählen möchten, sollte es als 2n+2</ geschrieben werden. Code>; Die spezifische Situation kann entsprechend der Projektsituation verwendet werden. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.dom div+div{ background:peru; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜<img src="https://img.php.cn/upload/image/609/651/330/166176826638603So%20schlie%C3%9Fen%20Sie%20das%20erste%20untergeordnete%20Element%20in%20CSS%20aus" title="166176826638603So schließen Sie das erste untergeordnete Element in CSS aus" alt="So schließen Sie das erste untergeordnete Element in CSS aus">🎜🎜 🎜Methode 3: Verwenden Sie den Selektor <code>:nth-child()🎜🎜🎜:nth-child(n), um das N-te untergeordnete Element abzugleichen, das zu seinem übergeordneten Element gehört, unabhängig vom Elementtyp. 🎜🎜Für die Typen Methode 3 und Methode 2 setzen Sie einfach den Wert von () auf „n+2“. 🎜rrreee🎜So schließen Sie das erste untergeordnete Element in CSS aus🎜🎜 🎜Methode 4: Verwenden Sie den Geschwisterselektor + oder ~🎜🎜🎜🎜🎜+ Selektor: Wenn Sie direkt nach dem Element ein anderes Element auswählen müssen , und beide das gleiche übergeordnete Element haben, können Sie den benachbarten Geschwisterselektor verwenden. 🎜🎜🎜🎜~ Selektor: Seine Funktion besteht darin, alle Geschwisterknoten hinter einem angegebenen Element zu finden. 🎜🎜🎜🎜Da es sich bei allen um div-Elemente handelt, hat das erste Element keine Geschwisterelemente, sodass Sie die untergeordneten Elemente außer dem ersten erhalten können. 🎜rrreee🎜🎜🎜rrreee🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜Erste Schritte mit dem Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt vonSo schließen Sie das erste untergeordnete Element in CSS aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
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