Maison > Article > interface Web > Que sont les sélecteurs d’identifiant et de classe en CSS ? Utilisation des sélecteurs d'identifiant et de classe (exemple)

Que sont les sélecteurs d’identifiant et de classe en CSS ? Utilisation des sélecteurs d'identifiant et de classe (exemple)

青灯夜游original: 2018-09-15 09:23:353426parcourir

Ce chapitre vous présenteraQue sont les sélecteurs d'identifiant et de classe en CSS ? Utilisation des sélecteurs d'identifiant et de classe (exemples) . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Sélecteur d'identifiant

Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués avec un identifiant spécifique.

L'élément HTML utilise l'attribut id pour définir le sélecteur d'identifiant, et le sélecteur d'identifiant en CSS est défini avec "#".

Les règles de style suivantes s'appliquent aux attributs d'élément id="demo", id="para1":

#demo{ width: 500px; height: 200px; margin: 50px auto; } 
#para1 { text-align:center; color:red; }

Remarque : les attributs d'ID ne doivent pas commencer par un numéro commençant par des chiffres. ne sont pas autorisés dans Mozilla / Ne fonctionnent pas dans le navigateur Firefox.

Exemple de code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id 选择器</title>
		<style>
		     #demo{ width: 500px; height: 200px; margin: 50px auto; } 
                     #para1 { text-align:center; color:red; }
		</style>
	</head>
	<body>
		<div id="demo">
			<p id="para1">Hello World!</p>
			<p>这个段落不受该样式的影响。</p>
		</div>
	</body>
</html>

Rendu :

Que sont les sélecteurs d’identifiant et de classe en CSS ? Utilisation des sélecteurs didentifiant et de classe (exemple)

2. >Le sélecteur de classe est utilisé pour décrire le style d'un groupe d'éléments. Le sélecteur de classe est différent du sélecteur d'identifiant. La classe peut être utilisée dans plusieurs éléments.

Le sélecteur de classe est représenté par l'attribut class en HTML. En CSS, le sélecteur de classe est affiché avec un point "." :

Dans l'exemple suivant, tous les objets avec la classe centrale. Les éléments HTML sont tous centrés.

Exemple de code :

.center {text-align:center;}

Rendu :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class 选择器/title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Que sont les sélecteurs d’identifiant et de classe en CSS ? Utilisation des sélecteurs didentifiant et de classe (exemple) Vous pouvez également spécifier des éléments HTML spécifiques Utiliser la classe .

Dans l'exemple suivant, tous les éléments p utilisent class="center" pour centrer le texte de l'élément :

p.center {text-align:center;}

Remarque :

vient en premier dans la classe nom Les chiffres ne peuvent pas être utilisés pour les caractères ! Cela ne fonctionnera pas dans Mozilla ou Firefox. Exemple de code :

Rendu :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css教程</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

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!

firefox css html class 选择器

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：Comment définir le style du tableau en CSS ? (exemple de code)Article suivant：Comment définir le style du tableau en CSS ? (exemple de code)

Articles Liés

Voir plus