セレクター宣言とネストとは何ですか? CSS セレクターの宣言とネスト-CSSチュートリアル-php.cn

セレクター宣言とネストとは何ですか? CSS セレクターの宣言とネスト

零下一度

リリース： 2017-04-22 13:10:52

オリジナル

2628 人が閲覧しました

CSS セレクターを使用して HTML タグを制御する場合、各セレクターの属性は一度に複数回宣言でき、セレクター自体も同時に複数回宣言できます。さらに、セレクタの形式はどれも正当であり、タグセレクタ、クラスセレクタ、ID セレクタはすべてまとめて宣言できます。 CSS セレクターを宣言するときに、一部のセレクターのスタイルがまったく同じか部分的に同じである場合、一括宣言を使用して同じスタイルのセレクターを同時に宣言できます。

<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>

ログイン後にコピー

グローバル宣言

実際のWebサイトで、ページ内のすべてのタグに同じCSSスタイルを使用したいが、1つずつまとめて宣言したくない場合は、グローバル宣言シンボルを使用できます* を宣言する。

<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>

ログイン後にコピー

2 つの宣言はまったく同じ効果があることがわかりますが、グローバル宣言を使用するとコードが大幅に削減されます。

セレクターのネスト

CSS セレクターでは、ネストを使用して特別な位置で HTML タグを宣言できます。

たとえば、p タグ内の b タグを制御します

<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>

ログイン後にコピー

ネストされたセレクターは非常に広く使用されており、ネストされたタグ自体だけでなく、カテゴリセレクターや ID セレクターもネストできます。

実際、 .top カテゴリのタグには 3 つのレベルのネストが使用されており、これには .top1 カテゴリが含まれています。 タグ、宣言されたスタイル。

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

ログイン後にコピー

セレクターのネストにより、CSS でのクラスと ID の宣言を大幅に減らすことができるため、ページの HTML を構築するときは、通常、外側のタグのクラスまたは ID のみを定義し、内側のタグをネストできます。ネストされた表現が使用されるため、新しいクラスや ID を定義する必要はありません。サブタグがこのルールを利用できない場合にのみ、別の宣言が行われます。

以上がセレクター宣言とネストとは何ですか? CSS セレクターの宣言とネストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。