Was sind Selektordeklarationen und Verschachtelungen? Deklaration und Verschachtelung von CSS-Selektoren-CSS-Tutorial-php.cn

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

零下一度

Freigeben： 2017-04-22 13:10:52

Original

2666 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

;-Tag der Kategorie top1, das das -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>

Nach dem Login kopieren

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!