Maison > Article > interface Web > Que sont les déclarations de sélecteur et l’imbrication ? Déclaration et imbrication des sélecteurs CSS

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

零下一度original: 2017-04-22 13:10:522624parcourir

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>

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>

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>

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 b6c5a531a458a2e790c1fd6421739d1c ; de la catégorie top1, qui contient la balise 8e99a69fbe029cd4e2b854e244eab143, 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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez CSS pour activer un exemple de code d'accélération matérielle sur ordinateur et mobileArticle suivant：Utilisez CSS pour activer un exemple de code d'accélération matérielle sur ordinateur et mobile

Articles Liés

Voir plus