Pour utiliser css pour obtenir un contrôle un-à-un, un-à-plusieurs ou plusieurs-à-un des éléments dans les pages HTML, des sélecteurs CSS sont nécessaires.
(I) Qu'est-ce qu'un sélecteur?
Chaque définition de style css se compose de deux parties, de la forme suivante: [code] selector {style} [/ code] La partie avant {} est le "sélecteur".
Le "sélecteur" spécifie l'objet du "style" dans {}, c'est-à-dire les éléments de la page Web auxquels le "style" est appliqué.
(Ii) Cinq sélecteurs CSS
⑴Sélecteur d'étiquette (sélecteur d'élément)
⑵ Sélecteur ID (unicité, une référence)
⑶ sélecteur de classe (sélecteur de classe unique, sélecteur multi-classes)
⑷Sélecteur d'attributs (sélection d'attributs simple, sélection d'attributs spécifiques, sélection d'attributs partiels, sélection d'attributs spécifiques)
⑸ Sélecteur dérivé (sélecteur descendant), sélecteur enfant (sélecteur enfant), sélecteur frère adjacent (sélecteur frère adjacent)
(Iii) Sélecteur d'élément (sélecteur d'étiquette)
Une page HTML complète est composée de nombreuses balises différentes. Sélecteur de balises: fait référence à l'utilisation de noms de balises HTML comme sélecteurs, à la catégorisation par nom de balise et à l'attribution d'un style CSS unifié à un certain type de balise sur la page.
Si vous définissez le style HTML, le sélecteur sera généralement un élément HTML, tel que p, h1, em, a ou même html lui-même.
Par exemple:
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
Le code css ci-dessus ajoutera un arrière-plan noir à l'ensemble du document; définissez la taille de la police de tous les éléments p sur 30 pixels et ajoutez un arrière-plan gris; ajoutez un arrière-plan rouge à tous les éléments h2 du document.
㈣ Sélecteur ID
Le sélecteur ⑴ID permet de spécifier le style d'une manière indépendante des éléments du document.
⑵ Le sélecteur d'ID peut spécifier des styles spécifiques pour les éléments HTML marqués avec des ID spécifiques. L'élément est sélectionné en fonction de l'ID d'élément, qui est unique, ce qui signifie que le même identifiant ne peut apparaître qu'une seule fois dans la même page de document.
Le sélecteur d'identifiant est défini par "#".
Par exemple: en css, les deux sélecteurs d'id 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 jaune:
#red{color：red；}
#yellow{color：yellow；}
Dans le code HTML ci-dessous, l'élément p avec l'attribut id de rouge est affiché en rouge, et l'élément p avec l'attribut id de vert est affiché en vert.
<p id="red">这个段落是红色。</p>
<p id="yellow">这个段落是黄色。</p>
㈤ Sélecteur de classe
Le sélecteur de classe utilise le nom de classe pour sélectionner l'élément. Le principe est de définir un attribut de classe pour l'élément en HTML, class="类名"puis d'utiliser "." Pour l'identifier, suivi du nom de classe. **
(1) Sélecteur de classe unique
Les sélecteurs de classe permettent de spécifier les styles de manière indépendante des éléments du document. Le sélecteur peut être utilisé seul ou en combinaison avec d'autres éléments.
① Modifier le code HTML
Avant d'utiliser le sélecteur de classe, vous devez modifier le balisage de document spécifique afin que le sélecteur de classe puisse fonctionner correctement. Afin d'associer le style du sélecteur de classe à l'élément, la classe doit être spécifiée comme une valeur appropriée.
Veuillez consulter le code HTML suivant:
<h1 class="important">
This heading is very important
</h1>
<p class="impportant">
This paragraph is very important.
</p>
Dans le code ci-dessus, les classes de deux éléments sont désignées comme importantes: le premier titre (élément h1) et le deuxième paragraphe (élément p).
② Grammaire
Nous utilisons la syntaxe suivante pour appliquer des styles à ces éléments catégorisés, c'est-à-dire qu'il y a un point (.) Avant le nom de la classe, puis combiné avec un sélecteur générique:
.important {color:red;}
Si vous souhaitez uniquement sélectionner tous les éléments avec le même nom de classe, vous pouvez ignorer le sélecteur générique dans le sélecteur de classe, ce qui n'a aucun effet négatif:
.important {color:red;}
③Sélecteur d'éléments combinés
Les sélecteurs de classe peuvent être utilisés avec les sélecteurs d'éléments.
♧ Par exemple, faites simplement apparaître les paragraphes sous forme de texte rouge:
p.important {color:red;}
Le sélecteur correspondra désormais à tous les p éléments dont l'attribut de classe contient des éléments importants, mais ne correspondra à aucun autre type d'éléments, qu'ils aient ou non cet attribut de classe.
Le sélecteur p.important est interprété comme: "tous les paragraphes dont la valeur d'attribut de classe est importante". Comme l'élément h1 n'est pas un paragraphe, le sélecteur de cette règle ne lui correspond pas, donc l'élément h1 ne deviendra pas du texte rouge.
♧ Par exemple: pour spécifier différents styles pour l'élément h1, vous pouvez utiliser le sélecteur
h1.important：
p.important {color:red;}
h1.important {color:blue;}
⑵Sélecteur multi-types
En HTML, une valeur de classe peut contenir une liste de mots, séparés par des espaces.
Par exemple, si vous souhaitez marquer un élément particulier comme important et comme avertissement en même temps, vous pouvez écrire:
<p class="important warning">
This paragraph is very important warning.
</p>
Remarque: l'ordre de ces deux mots n'a pas d'importance, et il peut être écrit comme un avertissement important.
Supposons que tous les éléments dont la classe est importante sont en gras et que tous les éléments dont la classe est warning sont en italique et que tous les éléments dont la classe contient à la fois important et warning ont un arrière-plan argenté.
Tu peux écrire:
.important {font-weight:bold;}
.warning{font-style:italic;}
.important .warning{background:silver;}
En liant deux sélecteurs de classe ensemble, seuls les éléments qui contiennent ces noms de classe peuvent être sélectionnés en même temps (l'ordre des noms de classe n'est pas limité).
Si un sélecteur multi-classes contient un nom de classe qui ne figure pas dans la liste des noms de classe, la correspondance échouera.
㈥Sélecteur d'attributs
Le sélecteur d'attribut peut sélectionner des éléments en fonction de leurs attributs et valeurs d'attribut.
⑴Sélection d'attributs simple
Si vous souhaitez sélectionner un élément avec un certain attribut, quelle que soit la valeur de l'attribut, vous pouvez utiliser un simple sélecteur d'attribut.
Exemple 1: Pour changer tous les éléments contenant le titre (titre) en rouge, vous pouvez écrire:
[title] {color:red;}
Exemple 2: appliquez uniquement des styles aux ancres (éléments a) avec des attributs href:
a[herf] {color:red;}
Exemple 3: Pour sélectionner en fonction de plusieurs attributs, liez simplement les sélecteurs d'attributs entre eux.
Afin de définir le texte des hyperliens HTML qui ont à la fois des attributs href et title sur rouge, vous pouvez écrire:
a[herf] [title] {color:red;}
Exemple 4: appliquez des styles à toutes les images avec des attributs alt pour mettre en évidence ces images valides:
img[alt] {border:5px solid red;}
⑵Sélectionnez en fonction de la valeur d'attribut spécifique
Exemple 1: pour changer le lien hypertexte vers un document spécifié sur le serveur Web en rouge, vous pouvez écrire:
a [href="http://www.baidu.com"] {color:red;}
Exemple 2: liez plusieurs sélecteurs de valeur d'attribut pour sélectionner un document.
a [href="http://www.baidu.com"] [title="baidu"] {color:red;}
Cela changera le texte du premier lien hypertexte en rouge, mais le deuxième ou le troisième lien ne sera pas affecté:
Remarque: cette exigence de format doit correspondre exactement à la valeur d'attribut.
Si la valeur d'attribut contient une liste de valeurs séparées par des espaces, la correspondance peut être problématique.
⑶Sélectionnez en fonction de certaines valeurs d'attribut
Si vous devez sélectionner un mot en fonction de la liste de mots dans la valeur d'attribut, vous devez utiliser un tilde (~).
Pour sélectionner l'élément qui contient important dans l'attribut de classe, vous pouvez le faire avec le sélecteur suivant:
p[class~="important"] {color:yellow;}
Remarque: Si le tilde est omis, cela signifie que la correspondance de valeur exacte doit être complétée.
⑷Type de sélection d'attribut spécifique
Par exemple:[lang |="en"] {color:red;}
La règle ci-dessus sélectionnera tous les éléments dont l'attribut lang est égal à en ou commençant par en-. Par conséquent, les trois premiers éléments de l'exemple de balise suivant seront sélectionnés, mais les deux derniers éléments ne seront pas sélectionnés:
(Vii) Sélecteur de progéniture
⑴Le sélecteur descendant est également appelé sélecteur de confinement. Le sélecteur descendant peut sélectionner des éléments qui sont les descendants d'un élément.
(2) Dans les sélecteurs descendants, le sélecteur sur le côté gauche de la règle comprend deux sélecteurs ou plus séparés par des espaces. L'espace entre les sélecteurs est un combinateur.
⑶ Chaque combinateur d'espaces peut être interprété comme "... trouvé dans ...", "... comme faisant partie de ...", "... comme descendant de ...", mais le sélecteur doit être lu de droite à gauche.
Exemple: pour appliquer des styles uniquement à l'élément em dans l'élément h1, vous pouvez écrire:
h1 em {colopr:red;}
⑴ La règle ci-dessus changera le texte de l'élément em qui est le descendant de l'élément h1 en rouge. Les autres textes em (comme em dans un paragraphe ou une citation en bloc) ne seront pas sélectionnés par cette règle.
⑵ Le sélecteur h1 em peut être interprété comme "tout élément em qui est un descendant de l'élément h1". Si vous voulez lire le sélecteur de gauche à droite, vous pouvez le changer pour l'instruction suivante: "Tous les h1 contenant em appliqueront le style suivant au em".
application:
Peut rendre les tâches possibles impossibles en HTML. Supposons qu'il existe un document avec une barre latérale et une zone principale. L'arrière-plan de la barre latérale est bleu et l'arrière-plan de la zone principale est blanc. Les deux zones contiennent une liste de liens. Vous ne pouvez pas définir tous les liens en bleu, car les liens bleus dans la barre latérale ne seront pas visibles. La solution consiste à utiliser des sélecteurs descendants. Dans ce cas, vous pouvez spécifier la valeur d'attribut de classe de la barre latérale pour le div contenant la barre latérale et définir la valeur d'attribut de classe de la zone principale sur maincontent.
Écrivez le style suivant:
div.sidebar {background:blue;}
div.maincontent {background:white;]
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
Sélecteur de sous-élément
 Les sélecteurs enfants ne peuvent sélectionner que des éléments qui sont des éléments enfants d'un certain élément.
⑵ Vous ne souhaitez sélectionner aucun élément descendant, mais souhaitez restreindre la portée, sélectionnez uniquement les éléments enfants d'un élément, veuillez utiliser le sélecteur enfant (Sélecteur enfant).
(3) Le sous-sélecteur utilise le signe supérieur à (sous-combineur). Il peut y avoir un espace blanc des deux côtés du sous-combineur, ce qui est facultatif.
Par exemple: Pour sélectionner un élément fort qui n'est qu'un élément enfant de l'élément h1, vous pouvez écrire:
h1 > strong {color:red;}
S'il est lu de droite à gauche, le sélecteur h1> strong peut être interprété comme "sélectionner tous les éléments forts qui sont des éléments enfants de h1".
Cette règle changera les deux éléments forts sous le premier h1 en rouge, mais le fort dans le second h1 n'est pas affecté:
∨ Sélecteur de frère voisin
⑴Le sélecteur de frère adjacent peut sélectionner l'élément immédiatement après un autre élément, et les deux ont le même élément parent.
⑵Le sélecteur de frère adjacent utilise le signe plus (+), qui est le combinateur de frère adjacent. Comme les sous-combineurs, il peut y avoir un espace blanc à côté des frères et sœurs adjacents.
Par exemple: si vous souhaitez augmenter la marge supérieure du paragraphe qui apparaît immédiatement après l'élément h1, vous pouvez écrire:
h1 + p {margin-top:50px;}
Ce sélecteur se lit comme suit: «Sélectionnez le paragraphe qui apparaît immédiatement après l'élément h1. Les éléments h1 et p ont le même élément parent.»
Explication spécifique: veuillez consulter l'extrait d'arborescence de document suivant:
Dans l'extrait de code ci-dessus, l'élément div contient deux listes: une liste non ordonnée et une liste ordonnée. Chaque liste contient trois éléments de liste. Les deux listes sont des frères et sœurs adjacents, et les éléments de la liste eux-mêmes sont également des frères adjacents.
Cependant, les éléments de liste dans la première liste et les éléments de liste dans la deuxième liste ne sont pas des frères et sœurs adjacents, car ces deux ensembles d'éléments de liste n'appartiennent pas au même élément parent (au plus, ils ne peuvent être comptés que comme cousins).
En termes simples: ul et ol sont des frères adjacents, et les éléments de liste dans ul et les éléments de liste dans ol ne sont pas des frères adjacents.
Je travaille actuellement dans le développement frontal sur le tas. Si vous souhaitez également apprendre la technologie de développement frontal maintenant et que vous rencontrez des questions sur les méthodes d'apprentissage, les itinéraires d'apprentissage, l'efficacité de l'apprentissage, etc. pendant le processus de démarrage de l'apprentissage frontal, vous pouvez postuler pour rejoindre mon front-end Jupe d'échange d'apprentissage: 421374697. Il rassemble des débutants, des changeurs et des débutants qui apprennent eux-mêmes le front-end. J'ai également des cartes mentales d'apprentissage front-end compilées pendant le temps que je faisais de la technologie frontale, des questions d'entrevue d'usine front-end, des didacticiels de code source de développement front-end et des documents PDF. Des livres et des tutoriels peuvent être obtenus auprès du cochon jupe si vous en avez besoin.
Remarque: Seul le deuxième élément de deux frères et sœurs adjacents peut être sélectionné avec un combinateur. Regardez le sélecteur ci-dessous:
li + li {font-weight:bold;}
Le sélecteur ci-dessus ne mettra en gras que les deuxième et troisième éléments de la liste. Le premier élément de la liste n'est pas affecté.