什么是选择器的声明与嵌套？ CSS选择器的声明与嵌套

零下一度

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

asal

2649 orang telah melayarinya

使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。并且，任何形式的选择器，都是合法的，标记选择器，class选择器和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>

Salin selepas log masuk

全局声明

对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。

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

Salin selepas log masuk

可以看出两种声明效果完全一样，但是，使用全局声明会使代码大大的减少。

选择器的嵌套

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

Salin selepas log masuk

嵌套选择器，使用非常的广泛，不仅只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。

下面的代码使用了三层嵌套，实际上更多层次的嵌套都是允许的，表示.top类别的标记中，包含的.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>

Salin selepas log masuk

选择器的嵌套，在CSS中可以大大减少对class和id的声明，因此，在构建页面的HTML时，通常只给外层标记定义class或者id，内层标记能通过嵌套表示的则利用嵌套的方式，从而，不需要再定义新的class或者id，只有当子标记无法利用此规则时，才进行单独的声明。

Atas ialah kandungan terperinci 什么是选择器的声明与嵌套？ CSS选择器的声明与嵌套 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!