Que sont les déclarations de sélecteur et l'imbrication ? Déclaration et imbrication des sélecteurs CSS-tutoriel CSS-php.cn

Que sont les déclarations de sélecteur et l'imbrication ? Déclaration et imbrication des sélecteurs CSS

零下一度

Libérer： 2017-04-22 13:10:52

original

2668 Les gens l'ont consulté

Lors de l'utilisation de sélecteurs CSS pour contrôler les balises HTML, plusieurs attributs de chaque sélecteur peuvent être déclarés en même temps, et plusieurs sélecteurs eux-mêmes peuvent également être déclarés en même temps. De plus, toute forme de sélecteur est légale, et les sélecteurs de balises, les sélecteurs de classe et les sélecteurs d'ID peuvent tous être déclarés collectivement. Lors de la déclaration de sélecteurs CSS, si les styles de certains sélecteurs sont exactement ou partiellement identiques, vous pouvez utiliser une déclaration collective pour déclarer simultanément des sélecteurs avec le même style.

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

Copier après la connexion

Déclaration globale

Pour un site Web réel, si vous souhaitez que toutes les balises de la page utilisent le même style CSS, cependant , Si vous ne souhaitez pas déclarer collectivement un par un, vous pouvez utiliser le symbole de déclaration globale * pour déclarer.

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

Copier après la connexion

On voit que les deux déclarations ont exactement le même effet, mais l'utilisation de déclarations globales réduira considérablement le code.

Imbrication des sélecteurs

Dans les sélecteurs CSS, vous pouvez utiliser l'imbrication pour déclarer des balises HTML dans des positions spéciales .

Par exemple, contrôler la balise b dans la balise p

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

Copier après la connexion

Les sélecteurs imbriqués sont très largement utilisés, pas seulement l'imbrication La balise lui-même, les sélecteurs de catégorie et les sélecteurs d’ID peuvent tous être imbriqués.

Le code suivant utilise trois niveaux d'imbrication. En fait, plusieurs niveaux d'imbrication sont autorisés, indiquant que la balise ; de la catégorie top1, qui contient la balise , déclare le style.

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

Copier après la connexion

L'imbrication des sélecteurs peut réduire considérablement la déclaration de classe et d'identifiant en CSS. Par conséquent, lors de la construction du code HTML de la page, seules les balises externes sont généralement définies. , si la balise interne peut être représentée par imbrication, la méthode d'imbrication est utilisée. Par conséquent, il n'est pas nécessaire de définir une nouvelle classe ou un nouvel identifiant. Ce n'est que lorsque la sous-balise ne peut pas profiter de cette règle qu'une déclaration distincte est effectuée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!