, ou p { font-weight: bold; } Ceci est un exemple simple, mais des pages plus sophistiquées conduiront à des chaînes de sélecteur plus compliquées et verbales. Une erreur de syntaxe dans n'importe quel sélecteur pourrait casser le style pour tous les éléments. Prérocesseurs CSS tels que Sass permettent la nidification (qui arrive également au CSS natif):

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Cela crée un code CSS identique, réduit l'effort de frappe et peut empêcher les erreurs. Mais:

jusqu'à ce que la nidification native arrive, vous aurez besoin d'un outil de construction CSS. Vous voudrez peut-être utiliser une option comme SASS, mais cela peut introduire des complications pour certaines équipes de développement.
La nidification peut causer d'autres problèmes. Il est facile de construire des sélecteurs profondément imbriqués qui deviennent de plus en plus difficiles à lire et à sortir Verbose CSS.

: is () fournit une solution CSS native qui a un support complet dans tous les navigateurs modernes (pas IE):

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Copier après la connexion

Un seul sélecteur peut contenir n'importe quel nombre de: est () pseudo-classes. Par exemple, le sélecteur complexe suivant applique une couleur de texte vert à tous les éléments

,

et

qui sont des enfants d'un qui a une classe de. Primaire ou. Le premier enfant d'un

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Le code équivalent sans: est () requis six sélecteurs CSS:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

Copier après la connexion

Notez que: est () ne peut pas correspondre à :: avant et :: après les pseudo-éléments, donc cet exemple de code échouera:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

Copier après la connexion

Le CSS: où le sélecteur de pseudo-classe

: où () la syntaxe du sélecteur est identique à: est () et est également prise en charge dans tous les navigateurs modernes (pas IE). Cela entraînera souvent un style identique. Par exemple:

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

Copier après la connexion

La différence est Spécificité . La spécificité est l'algorithme utilisé pour déterminer quel sélecteur CSS doit remplacer tous les autres. Dans l'exemple suivant, l'article P est plus spécifique que P seul, donc tous les éléments de paragraphe dans un

seront gris:

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Dans le cas de: est (), la spécificité est le sélecteur le plus spécifique trouvé dans ses arguments. Dans le cas de: où (), la spécificité est nulle. Considérez le CSS suivant:

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

Copier après la connexion

Appliquons ce CSS au HTML suivant:

<span>article p {
</span>  <span>color: black;
</span><span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Copier après la connexion

Le texte du paragraphe sera coloré en rouge, comme le montre la démo de codep suivante.

Voir le stylo Utilisation du: est sélecteur par SitePoint (@SitePoint) sur Codepen.

Le sélecteur: est () a la même spécificité que l'article P, mais il vient plus tard dans la feuille de style, donc le texte devient rouge. Il est nécessaire de supprimer à la fois les sélecteurs de l'article P et: est () pour appliquer une couleur bleue, car le sélecteur: où () est moins spécifique que l'un ou l'autre. Plus de bases de code utiliseront: est () que: où (). Cependant, la spécificité zéro de: où () pourrait être pratique pour les réinitialisations du CSS, qui appliquent une base de référence des styles standard lorsqu'aucun style spécifique n'est disponible. En règle générale, les réinitialisations appliquent une police par défaut, des couleurs, des paddages et des marges. Ce code de réinitialisation CSS applique une marge supérieure de 1EM à

les en-têtes à moins que ne soit le premier enfant d'un élément

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Copier après la connexion

Tenter de définir une marge supérieure

personnalisée plus tard dans la feuille de style n'a aucun effet, car l'article: First-enfant a une spécificité plus élevée:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Vous pouvez résoudre ce problème en utilisant un sélecteur de spécificité supérieure, mais c'est plus de code et pas nécessairement évident pour les autres développeurs. Vous finirez par oublier pourquoi vous l'avez besoin:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Copier après la connexion

Vous pouvez également résoudre le problème en appliquant! Important à chaque style, mais Veuillez éviter de le faire! Cela rend plus difficile le style et le développement:

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Un meilleur choix consiste à adopter la spécificité zéro de: où () dans votre réinitialisation CSS:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

Copier après la connexion

Vous pouvez désormais remplacer tout style de réinitialisation CSS quelle que soit la spécificité; Il n'y a pas besoin de sélecteurs supplémentaires ou! IMPORTANT:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

Copier après la connexion

Le CSS: a un sélecteur de pseudo-classe

Le sélecteur: a () utilise une syntaxe similaire pour: est () et: où (), mais il cible un élément qui contient un ensemble d'autres. Par exemple, voici le CSS pour ajouter une bordure bleue à deux pixels à n'importe quel lien qui contient une ou plusieurs balises ou

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

Copier après la connexion

C'est le développement CSS le plus excitant depuis des décennies! Les développeurs ont enfin un moyen de cibler les éléments parents! Le «sélecteur parent» insaisissable a été l'une des fonctionnalités CSS les plus demandées, mais elle augmente les complications de performance pour les fournisseurs de navigateurs, et cela a été longtemps à venir. En termes simplistes:

Les navigateurs appliquent les styles CSS à un élément lorsqu'il est dessiné sur la page. L'ensemble de l'élément parent doit donc être redéfini lors de l'ajout d'éléments enfants.
L'ajout, la suppression ou la modification des éléments en JavaScript pourrait affecter le style de toute la page jusqu'à l'enclosage .

En supposant que les fournisseurs ont résolu les problèmes de performance, l'introduction de: a () permet des possibilités qui auraient été impossibles sans JavaScript dans le passé. Par exemple, vous pouvez définir les styles d'une forme extérieure

et le bouton de soumission suivant lorsque tout champ intérieur requis n'est pas valide:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Copier après la connexion

Comment le CSS: est, où et: les sélecteurs de pseudo-classe fonctionnent-ils

Cet exemple ajoute un indicateur sous-menu de liaison de navigation qui contient une liste des éléments du menu des enfants:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Copier après la connexion

Ou peut-être pourriez-vous ajouter des styles de débogage, tels que la mise en évidence de tous les éléments

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!