Heim > Artikel > Web-Frontend > Was sind Selektordeklarationen und Verschachtelungen? Deklaration und Verschachtelung von CSS-Selektoren

Was sind Selektordeklarationen und Verschachtelungen? Deklaration und Verschachtelung von CSS-Selektoren

零下一度Original: 2017-04-22 13:10:522625Durchsuche

Wenn Sie CSS-Selektoren zur Steuerung von HTML-Tags verwenden, können mehrere Attribute jedes Selektors gleichzeitig deklariert werden, und mehrere Selektoren selbst können auch gleichzeitig deklariert werden. Darüber hinaus ist jede Form von Selektoren zulässig und Tag-Selektoren, Klassen-Selektoren und ID-Selektoren können alle gemeinsam deklariert werden. Wenn beim Deklarieren von CSS-Selektoren die Stile einiger Selektoren genau oder teilweise gleich sind, können Sie mithilfe der Sammeldeklaration gleichzeitig Selektoren mit demselben Stil deklarieren.

<span style="font-size:24px;"><html>
	<head>
		<title>
			集体声明
		</title>
		<style type="text/css">
			<!--
			h1,h2,h3,h4,h5,p{
			color:purple;
			font-size:15px;
		}
			h2.special,.special,#one{
			text-decoration:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<h1>集体声明h1</h1>
		<h2 class="special">集体声明h2</h2>
		<h3>集体声明h3</h3>
		<h4>集体声明h4</h4>
		<h5>集体声明h5</h5>
		<p>集体声明p1</p>
		<p class="special">集体声明p2</p>
		<p id="one">集体声明p3</p>
	</body>
</html>
</span>

Globale Deklaration

Für eine tatsächliche Website, wenn Sie jedoch möchten, dass alle Tags auf der Seite denselben CSS-Stil verwenden , Wenn Sie nicht einzeln deklarieren möchten, können Sie zum Deklarieren das globale Deklarationssymbol * verwenden.

<span style="font-size:24px;"><html>
	<head>
		<title>
			集体声明
		</title>
		<style type="text/css">
			<!--
			*{
			color:purple;
			font-size:15px;
		}
			h2.special,.special,#one{
			text-decoration:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<h1>集体声明h1</h1>
		<h2 class="special">集体声明h2</h2>
		<h3>集体声明h3</h3>
		<h4>集体声明h4</h4>
		<h5>集体声明h5</h5>
		<p>集体声明p1</p>
		<p class="special">集体声明p2</p>
		<p id="one">集体声明p3</p>
	</body>
</html>
</span>

Es ist ersichtlich, dass die beiden Deklarationen genau den gleichen Effekt haben, die Verwendung globaler Deklarationen jedoch den Code erheblich reduziert.

Verschachtelung von Selektoren

In CSS-Selektoren können Sie die Verschachtelung verwenden, um HTML-Tags an speziellen Positionen zu deklarieren.

Zum Beispiel die Steuerung des b-Tags im p-Tag

<span style="font-size:24px;"><html>
	<head>
		<title>
			CSS选择器的嵌套声明
		</title>
		<style type="text/css">
			<!--
			p b{
			color:maroon;
			text-decortion:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<p>嵌套使<b>用CSS</b>标记的方法</p>
		嵌套之外的<b>标记</b>不生效
	</body>
</html>
</span>

Verschachtelte Selektoren werden sehr häufig verwendet, nicht nur die Verschachtelung des Tags selbst, Kategorieselektoren und ID-Selektoren können alle verschachtelt werden.

Der folgende Code verwendet drei Verschachtelungsebenen. Tatsächlich sind mehr Verschachtelungsebenen zulässig, was darauf hinweist, dass das e388a4556c0f65e1904146cc1a846bee ;-Tag der Kategorie top1, das das 8e99a69fbe029cd4e2b854e244eab143-Tag enthält, deklariert den Stil.

<span style="font-size:24px;">td.top .top1 strong{
			font-size:16px;
		}
<td class="top">
	<p class="top1">
		其他内容<strong>CSS控制的部分</strong>其他内容
	</p>
</td>
</span>

Durch die Verschachtelung von Selektoren kann die Deklaration von Klasse und ID in CSS erheblich reduziert werden. Daher werden beim Erstellen des HTML-Codes der Seite normalerweise nur die äußeren Tags Klasse oder ID definiert Wenn das innere Tag durch Verschachtelung dargestellt werden kann, wird die Verschachtelungsmethode verwendet. Daher ist es nicht erforderlich, eine neue Klasse oder ID zu definieren. Nur wenn das Unter-Tag diese Regel nicht nutzen kann, wird eine separate Deklaration vorgenommen.

Das obige ist der detaillierte Inhalt vonWas sind Selektordeklarationen und Verschachtelungen? Deklaration und Verschachtelung von CSS-Selektoren. 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

Vorheriger Artikel：Verwenden Sie CSS, um Beispielcode für die Hardwarebeschleunigung auf Desktops und Mobilgeräten zu aktivierenNächster Artikel：Verwenden Sie CSS, um Beispielcode für die Hardwarebeschleunigung auf Desktops und Mobilgeräten zu aktivieren

In Verbindung stehende Artikel

Mehr sehen