Révéler les fonctions cachées et l'utilisation pratique des sélecteurs avancés CSS

Décryptez les fonctions cachées et cas pratiques des sélecteurs avancés CSS

CSS (Cascading Style Sheets) est un langage utilisé pour décrire les styles de pages Web et joue un rôle essentiel dans le développement Web. En plus des sélecteurs de base, CSS fournit également des sélecteurs avancés qui peuvent sélectionner des éléments plus précisément et leur ajouter des styles. Cet article présentera quelques fonctions cachées et cas pratiques de sélecteurs avancés CSS, et fournira des exemples de code spécifiques.

1. Sélecteur de caractères génériques

Le sélecteur de caractères génériques utilise le symbole "*" pour faire correspondre tous les éléments de la page. Par exemple, utilisez un sélecteur de caractère générique pour styliser tous les paragraphes de la page :

p {
    color: blue;
}

De cette façon, tous les paragraphes de la page apparaîtront en bleu.

2. Sélecteur d'attribut

Le sélecteur d'attribut peut sélectionner des éléments en fonction de leurs valeurs d'attribut et leur ajouter des styles. Les sélecteurs d'attributs courants sont les suivants :

1. Sélecteur d'attribut : utilisez les noms d'attribut pour sélectionner des éléments.

Par exemple, vous pouvez sélectionner tous les éléments avec l'attribut "titre" et leur ajouter des styles :

[title] {
    font-weight: bold;
}

2. Sélecteur de valeur d'attribut : sélectionnez des éléments en fonction des valeurs d'attribut.

Par exemple, vous pouvez sélectionner tous les éléments avec la valeur d'attribut "rouge" et leur ajouter des styles :

[title="red"] {
    color: red;
}

3. Sélecteur Exists : sélectionne les éléments avec un attribut spécifique, quelle que soit la valeur de l'attribut.

Par exemple, vous pouvez sélectionner tous les éléments avec l'attribut "titre" et leur ajouter des styles :

[title] {
    font-weight: bold;
}

4. Commence par le sélecteur : sélectionnez les éléments dont la valeur d'attribut commence par une chaîne spécifique.

Par exemple, vous pouvez sélectionner tous les éléments avec l'attribut "title" commençant par "hello" et leur ajouter des styles :

[title^="hello"] {
    color: green;
}

5. Se termine par un sélecteur : sélectionnez les éléments dont la valeur d'attribut se termine par une chaîne spécifique.

Par exemple, vous pouvez sélectionner tous les éléments avec l'attribut "title" se terminant par "world" et leur ajouter des styles :

[title$="world"] {
    color: blue;
}

3. Sélecteur de pseudo-classe

Le sélecteur de pseudo-classe est un état spécial utilisé pour sélectionner éléments ou sélecteur d’emplacement. Les sélecteurs de pseudo-classe courants sont les suivants :

1.  : sélecteur de pseudo-classe en survol : sélectionne l'état lorsque la souris survole l'élément.

Par exemple, vous pouvez sélectionner tous les états de survol et les styliser :

a:hover {
    text-decoration: underline;
}

2. :sélecteur de pseudo-classe focus : sélectionne l'élément qui a le focus.

Par exemple, vous pouvez sélectionner les zones de saisie ciblées et leur ajouter des styles :

input:focus {
    outline: 2px solid blue;
}

3. : sélecteur de pseudo-classe du nième enfant : sélectionnez l'élément enfant à la position spécifiée.

Par exemple, vous pouvez sélectionner les éléments pairs dans chaque liste et leur ajouter des styles :

li:nth-child(even) {
    background-color: lightgray;
}

Quatre cas pratiques d'utilisation conjointe de sélecteurs avancés

1. Effet de menu de la barre de navigation

Utiliser des sélecteurs d'attributs et des pseudos. -sélecteur de classe, qui peut réaliser l'effet de mise en évidence du menu de la barre de navigation. Exemple de code :

ul#nav li {
    display: inline;
    margin-right: 10px;
}

ul#nav li a {
    text-decoration: none;
    color: black;
}

ul#nav li a:hover {
    color: blue;
    font-weight: bold;
}

2. Validation d'entrée de formulaire

À l'aide de sélecteurs d'attributs et de sélecteurs de pseudo-classe, vous pouvez ajouter des styles de validation aux zones de saisie. Exemple de code :

input[required] {
    border: 1px solid red;
}

input:invalid {
    background-color: pink;
}

Ce qui précède est le décryptage des fonctions cachées et des cas pratiques des sélecteurs avancés CSS. En utilisant ces sélecteurs avancés de manière flexible, nous pouvons sélectionner des éléments avec plus de précision et leur ajouter des styles, obtenant ainsi des effets de page plus diversifiés. J'espère que cet article pourra vous aider à utiliser les sélecteurs en CSS.

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!