Que sont les sélecteurs d'identifiant et de classe en CSS ? Utilisation des sélecteurs d'identifiant et de classe (exemple)-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-09-15 09:23:35

original

3445 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

Rendu :

Que sont les sélecteurs didentifiant 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;}

Copier après la connexion

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>

Copier après la connexion

Que sont les sélecteurs didentifiant 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;}

Copier après la connexion

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>

Copier après la connexion

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!