Différents types de sélecteurs CSS3

Il existe de nombreux types de sélecteurs CSS3, qui peuvent sélectionner des éléments en fonction de différents attributs d'élément, relations structurelles ou états. Ce qui suit présente plusieurs types de sélecteurs CSS3 couramment utilisés et fournit des exemples de code spécifiques.

1. Sélecteur de base :

• Sélecteur d'élément : Utilisez le nom de l'élément comme sélecteur, voici l'élément p comme exemple :

  p {
    color: red;
  }

• Sélecteur de classe : Utilisez le nom de la classe comme sélecteur, en commençant par. , Ici nous prenons comme exemple l'élément dont la classe est exemple :

  .example {
    font-size: 16px;
  }

• Sélecteur d'ID : Utilisez ID comme sélecteur, en commençant par #, ici nous prenons comme exemple l'élément dont l'identifiant est titre :

  #title {
    font-weight: bold;
  }

2. Sélecteur d'attribut :

• [attr] : Sélectionnez les éléments avec des attributs spécifiés, prenez ici l'élément avec l'attribut data comme exemple :

  [data] {
    background-color: yellow;
  }

• [attr=value] : Sélectionnez les éléments avec les attributs et les valeurs spécifiés, ici prendre la valeur de l'attribut de données Prenons l'élément d'exemple comme exemple :

  [data="example"] {
    color: blue;
  }

• [attr^=value] : Sélectionnez les éléments dont les valeurs d'attribut commencent par la valeur spécifiée. Ici, prenez l'élément dont la valeur d'attribut de données commence par. "test" à titre d'exemple :

  [data^="test"] {
    text-decoration: underline;
  }

3. Sélecteur structurel :

• :nth-child(n) : Sélectionnez le nième élément enfant de l'élément parent. à titre d'exemple :

  .parent :nth-child(3) {
    background-color: green;
  }

• :first-child : Sélectionnez le premier élément enfant de l'élément parent. Ici, nous prenons comme exemple le premier élément enfant de l'élément parent :

  .parent :first-child {
    font-style: italic;
  }

4. Sélecteur de pseudo-classe :

• :hover : Sélectionnez l'élément au survol de la souris. L'état de l'élément, voici un exemple de changement de couleur de fond au survol de l'élément :

  .example:hover {
    background-color: orange;
  }

• :active : Sélectionnez l'état au survol de l'élément. est activé, voici un exemple de changement de couleur du texte lorsque l'on clique sur l'élément :

  .example:active {
    color: purple;
  }

Ce qui précède présente quelques types et exemples de code de sélecteurs CSS3, qui peuvent aider les développeurs à sélectionner et à contrôler de manière plus flexible le style des éléments sur la page. En maîtrisant ces sélecteurs, vous pouvez améliorer efficacement l'efficacité du développement des pages et l'expérience utilisateur.

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!