Maison > Article > interface Web > Maîtrisez les sélecteurs est et où : créez des mises en page CSS dynamiques et interactives

Maîtrisez les sélecteurs est et où : créez des mises en page CSS dynamiques et interactives

PHPzoriginal: 2023-09-08 16:55:57852parcourir

Maîtrise des sélecteurs est et où : créez des mises en page CSS dynamiques et interactives

Le CSS est un élément indispensable du développement front-end et peut fournir divers effets de conception exquis pour les pages Web. Parmi eux, les sélecteurs sont l'un des cœurs du CSS, qui peuvent nous aider à sélectionner des éléments sur la page et à les styliser. Cet article présentera deux sélecteurs CSS couramment utilisés : est et où. Grâce à leur utilisation flexible, nous pouvons créer une mise en page CSS plus dynamique et interactive.

1. is selector

Le is selector est un nouveau sélecteur introduit dans CSS niveau 4. Il peut sélectionner des éléments spécifiques en fonction de la correspondance des attributs des éléments. Le sélecteur is prend un ou plusieurs sélecteurs comme arguments, séparés par des virgules. Par exemple :

nav.is-active,
.header.is-active {
  background-color: #ff0000;
  color: #ffffff;
}

Dans le code ci-dessus, les sélecteurs nav.is-active et .header.is-active représentent la sélection des éléments nav et .header avec la classe is-active. Lorsque ces éléments sont sélectionnés, les styles correspondants sont appliqués, notamment une couleur d'arrière-plan rouge et une couleur de police blanche.

Avec le sélecteur is, nous pouvons sélectionner des éléments en fonction de différentes valeurs d'attribut pour obtenir des effets de changement de style dynamique. Par exemple, dans une barre de navigation, nous pouvons ajouter la classe is-active en fonction de l'élément de navigation actuellement sélectionné, puis utiliser le sélecteur is pour ajouter différents styles à différents éléments de navigation afin de mettre en évidence l'élément actuellement sélectionné.

2. Sélecteur Where

Le sélecteur Where est également un nouveau sélecteur introduit dans CSS niveau 4. Il peut sélectionner des éléments en fonction de conditions de sélection spécifiées, similaires aux opérateurs logiques CSS. Par exemple :

div:where(.is-active) {
  background-color: #ff0000;
  color: #ffffff;
}

Dans le code ci-dessus, le sélecteur div:where(.is-active) signifie sélectionner l'élément div avec la classe is-active. Lorsque l'élément est sélectionné, les styles correspondants sont appliqués, y compris la couleur d'arrière-plan étant rouge et la couleur de police étant blanche.

Avec le sélecteur Where, nous pouvons sélectionner de manière plus flexible des éléments avec des conditions spécifiques, telles que la sélection du premier élément enfant ou la sélection du dernier élément enfant, et la sélection en fonction de la position de l'élément dans le flux de documents. De cette façon, nous pouvons définir les styles correspondants en fonction de la position et de l'état des éléments pour obtenir un effet de mise en page plus dynamique et interactif.

3. Exemple d'application

Ce qui suit est un exemple simple qui montre comment utiliser les sélecteurs est et où pour créer des mises en page CSS dynamiques et interactives.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div:where(.is-active) {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      nav.is-active,
      .header.is-active {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      .nav-item:hover {
        background-color: #0000ff;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="is-active">Div 1</div>
    <div>Div 2</div>
    
    <nav class="is-active">Nav 1</nav>
    <nav>Nav 2</nav>
    
    <div class="header is-active">Header 1</div>
    <div class="header">Header 2</div>
    
    <ul class="nav-list">
      <li class="nav-item">Item 1</li>
      <li class="nav-item">Item 2</li>
      <li class="nav-item">Item 3</li>
    </ul>
  </body>
</html>

Grâce au code ci-dessus, vous pouvez voir que lorsque l'élément avec le nom de classe est actif est sélectionné, sa couleur d'arrière-plan et sa couleur de police deviendront rouges en même temps, lorsque la souris survole l'élément avec la classe ; nom nav-item , la couleur d'arrière-plan et la couleur de la police deviendront bleues.

Cet exemple montre comment ajouter des styles spécifiques aux éléments en fonction de leur statut et de leurs attributs pour obtenir un effet de mise en page CSS dynamique et interactif.

Résumé :

Avec le sélecteur is et le sélecteur Where, nous pouvons sélectionner et styliser les éléments de manière plus flexible, créant ainsi une mise en page CSS plus dynamique et interactive. Leur introduction offre plus de choix et de possibilités pour le développement front-end, nous permettant de mieux répondre aux différents besoins de conception et expériences d'interaction des utilisateurs. Pour plus d'informations sur l'utilisation et des exemples du sélecteur est et du sélecteur où, vous pouvez consulter des documents et des didacticiels pertinents pour maîtriser leurs compétences d'application et ajouter plus de créativité et de points forts à la conception et à la mise en page de votre page.

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!

css class 选择器

Déclaration：

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

Article précédent：Utiliser CSS pour lancer des effets d'animationArticle suivant：Utiliser CSS pour lancer des effets d'animation

Articles Liés

Voir plus