Sélecteur d'identifiant CSS

[Introduction] sélecteur d'identifiant Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués d'un identifiant spécifique. Le sélecteur d'identifiant est défini avec " ". Les deux sélecteurs d'identifiant suivants, le premier peut définir la couleur de l'élément comme rouge et le second peut définir la couleur de l'élément comme vert : rouge {color:re

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.

Le sélecteur d'identifiant est défini avec "#".

Pour les deux sélecteurs d'identifiant ci-dessous, le premier peut définir la couleur de l'élément comme rouge, et le second peut définir la couleur de l'élément comme vert :

#red {color :red;}
#green {color:green;}

Dans le code HTML suivant, l'élément p avec l'attribut id red est affiché en rouge, et l'élément p avec l'attribut id l'attribut vert est affiché en vert.

Ce paragraphe est en rouge.

Ce paragraphe est vert.

Remarque : L'attribut id ne peut apparaître qu'une seule fois par document HTML. Pour savoir pourquoi, consultez XHTML : refactorisation de sites Web.

Sélecteurs d'identifiant et sélecteurs dérivés

Dans les mises en page modernes, les sélecteurs d'identifiant sont souvent utilisés pour créer des sélecteurs dérivés.

#sidebar p {
font-style : italic;
text-align: right;
margin-top: 0.5em;
}

Le style ci-dessus ne sera appliqué qu'aux paragraphes qui apparaissent dans l'élément dont l'identifiant est la barre latérale. Cet élément est très probablement une cellule p ou un tableau, bien qu'il puisse également s'agir d'un tableau ou d'un autre élément de niveau bloc. Il peut même s'agir d'un élément en ligne, tel que ou , mais une telle utilisation est illégale car elle ne peut pas être utilisée dans un élément en ligne ;p> (si vous oubliez pourquoi, voir XHTML : refactorisation de sites Web).

Un sélecteur, plusieurs utilisations

Même si l'élément marqué comme barre latérale ne peut apparaître qu'une seule fois dans le document, ce sélecteur d'identifiant peut être utilisé plusieurs fois comme sélecteur dérivé Fois :

#sidebar p {
font-style : italic;
text-align: right;
margin-top: 0.5em;
}

#sidebar h2 {
taille de police : 1em;
poids de police : normal;
style de police : italique;
marge : 0;
hauteur de ligne : 1,5 ;
texte- align: right;
}

Ici, ce qui est évidemment différent des autres éléments p de la page, c'est que l'élément p à l'intérieur de la barre latérale a été spécialement traité. différent des autres éléments p de la page Contrairement à tous les autres éléments h2, les éléments h2 de la barre latérale reçoivent également un traitement spécial différent.

Sélecteurs séparés

Le sélecteur d'identifiant peut fonctionner indépendamment même s'il n'est pas utilisé pour créer des sélecteurs dérivés :

#sidebar {
border : 1px dotted #000;
padding: 10px;
}

Selon cette règle, l'élément avec l'identifiant de la barre latérale aura une bordure pointillée noire de la largeur d'un pixel, et en même temps Il sera entouré de 10 pixels de remplissage (espace blanc interne). Les anciennes versions des navigateurs Windows/IE peuvent ignorer cette règle, sauf si vous définissez spécifiquement l'élément auquel appartient ce sélecteur :

p#sidebar {
border: 1px dotted #000;
padding: 10px;
}

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!