Maison > interface Web > tutoriel CSS > Conseils d'optimisation de la programmation CSS3 : Comment utiliser habilement les sélecteurs is etwhere

Conseils d'optimisation de la programmation CSS3 : Comment utiliser habilement les sélecteurs is etwhere

WBOY
Libérer: 2023-09-10 09:03:38
original
945 Les gens l'ont consulté

Conseils doptimisation de la programmation CSS3 : Comment utiliser habilement les sélecteurs is etwhere

CSS est l'une des compétences essentielles des développeurs front-end, et CSS3 est une version avancée de CSS, comprenant des fonctionnalités et des fonctions plus puissantes. En CSS3, le sélecteur is et le sélecteur où sont deux techniques d'optimisation de programmation très pratiques qui peuvent aider les développeurs à écrire du code de style plus efficacement.

1. Présentation du sélecteur is

Le sélecteur is est un nouveau sélecteur en CSS3. Il peut faire correspondre plusieurs sélecteurs en même temps et n'a besoin d'écrire le même code qu'une seule fois. Par exemple, supposons que nous ayons une liste et que nous devions appliquer le même style aux balises li qu'elle contient. La manière traditionnelle d'écrire consiste à sélectionner chaque balise li séparément et à définir le style. Le code aura l'air très détaillé :

li : nth- child(1) {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

li:nth-child(2) {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

li:nth-child(3) {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

Avec le sélecteur is, on peut Le même code de style est écrit ensemble pour rendre le code plus concis et lisible :

:is(li:nth-child(1), li:nth-child(2), li:nth-child(3)) {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

De cette façon, nous pouvons non seulement améliorer la maintenabilité du code de style, mais également réduire la quantité de code et améliorer l'efficacité du développement.

2. Présentation du sélecteur Where

Le sélecteur Where est également un nouveau sélecteur en CSS3. Il a une fonction similaire au sélecteur is, mais la syntaxe est différente. La syntaxe du sélecteur Where est plus flexible et peut sélectionner des éléments en fonction de différentes conditions. Par exemple, nous souhaitons appliquer le même style lors de la sélection d'éléments avec un certain nom de classe ou lorsque l'élément actuel est un élément d'un type spécifique. La manière traditionnelle d'écrire consiste à utiliser plusieurs sélecteurs et à définir le même style :

[. class*=" example”] {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

[type="checkbox"] {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

[type="radio"] {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

Et en utilisant le sélecteur Where, nous pouvons utiliser ces sélecteurs fusionnent pour rendre le code plus concis :

:where([class*="example"], [type="checkbox"], [type="radio"]) {

...
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

}

Code comme cela peut améliorer la lisibilité du code et le rendre plus pratique lorsque vous devez modifier le style.

3. Exemples d'utilisation habile des sélecteurs est et où

Voici quelques exemples pour montrer comment utiliser habilement les sélecteurs est et où pour optimiser la programmation CSS :

  1. Bouton d'angle arrondi

:is(.btn-primary , .btn-secondary) {

border-radius: 8px;
Copier après la connexion

}

Ce code sélectionne un bouton avec un nom de classe .btn-primary ou .btn-secondary et applique un style de bordure arrondie.

  1. Motif zèbre de table

tr:nth-child(even) {

background-color: #f2f2f2;
Copier après la connexion

}

:is([type="checkbox"], [type="radio"]) tr:nth-child(even ) {

background-color: #ffffff;
Copier après la connexion

}

Ce code est capable de sélectionner les lignes paires du tableau et d'appliquer une couleur d'arrière-plan différente aux lignes qui ont des cases à cocher ou des cases radio.

  1. Images de carrés et de cercles

:is(.square, .circle) {

width: 100px;
height: 100px;
Copier après la connexion

}

.square {

border-radius: 0;
Copier après la connexion

}

.circle {

border-radius: 50%;
Copier après la connexion

}

Ce code peut sélectionner une image avec un nom de classe .square ou .circle, avec différents styles de bordure appliqués en fonction du nom de classe.

Grâce à ces exemples, nous pouvons voir à quel point l'utilisation intelligente du sélecteur is et où le sélecteur peut améliorer la lisibilité et la maintenabilité du code, réduire le code de style répété et rendre le code plus concis et efficace.

Résumé :

is sélecteur et où sélecteur sont deux techniques d'optimisation de programmation puissantes fournies par CSS3, qui peuvent aider les développeurs à écrire du code de style plus efficacement. Une utilisation raisonnable de ces deux sélecteurs peut améliorer la lisibilité et la maintenabilité du code, réduire la quantité de code et améliorer l'efficacité du développement. Par conséquent, maîtriser et appliquer le sélecteur is et le sélecteur Where est l’une des compétences essentielles de tout développeur front-end.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal