La bonne façon d'utiliser les sélecteurs CSS

Comment utiliser correctement les sélecteurs CSS

Les sélecteurs CSS (Cascading Style Sheets) sont un outil important pour sélectionner et appliquer des styles aux éléments HTML. Une utilisation appropriée des sélecteurs CSS peut rendre nos styles de pages Web plus précis et plus flexibles. Ce qui suit explique en détail comment utiliser correctement les sélecteurs CSS et fournit des exemples de code spécifiques.

1. Sélecteur de base

1. Sélecteur d'élément : appliquez des styles en sélectionnant le nom de la balise d'un élément HTML. Par exemple, pour définir la couleur de police sur rouge pour tous les éléments du paragraphe (p) :

p {
  color: red;
}

2. Sélecteur de classe : appliquez le style en sélectionnant le nom de classe de l'élément HTML. Les sélecteurs de classe commencent par un point (.) suivi du nom de la classe. Par exemple, pour définir la couleur d'arrière-plan sur jaune pour tous les éléments avec le nom de classe « intro » :

.intro {
  background-color: yellow;
}

3. Sélecteur d'ID : Appliquez le style en sélectionnant l'ID de l'élément HTML. Le sélecteur d'ID commence par un signe dièse (#) suivi du nom de l'ID. Par exemple, pour définir la largeur à 200 pixels pour l'élément avec le nom d'ID « logo » :

#logo {
  width: 200px;
}

2. Sélecteur de combinaison

1. Sélecteur enfant : appliquez des styles en sélectionnant les éléments enfants de l'élément. Les sous-sélecteurs utilisent le signe supérieur à (>). Par exemple, pour définir la taille de police à 14 pixels pour tous les éléments p sous l'élément article :

article > p {
  font-size: 14px;
}

2. Sélecteur descendant : appliquez des styles en sélectionnant les éléments descendants de l'élément. Les sélecteurs descendants utilisent des espaces. Par exemple, pour définir la couleur de police sur vert pour tous les éléments p sous la classe d'éléments parent « section » :

.section p {
  color: green;
}

3. sélecteur de frères et sœurs adjacents : appliqué en sélectionnant les éléments frères adjacents au style d'élément. Le sélecteur de frère adjacent utilise le signe plus (+). Par exemple, pour définir la police en gras pour tous les éléments p qui apparaissent après l'ID « en-tête » :

#header + p {
  font-weight: bold;
}

4. Sélecteur général de frères et sœurs : appliquez le style en sélectionnant tous les éléments frères et sœurs de l'élément. Le sélecteur universel de frères et sœurs utilise le tilde (~). Par exemple, pour définir la bordure sur une ligne continue de 1 pixel pour tous les éléments div qui apparaissent après l'ID est "sidebar" :

#sidebar ~ div {
  border: 1px solid;
}

3. Sélecteur d'attribut

1. Sélecteur d'attribut [attribute] : en sélectionnant les éléments avec spécifié attributs. Appliquer des styles. Par exemple, pour définir un soulignement de décoration de texte pour tous les éléments a avec l'attribut href :

a[href] {
  text-decoration: underline;
}

2. [attribut=value] Sélecteur d'attribut : appliquez le style en sélectionnant les éléments avec l'attribut et la valeur d'attribut spécifiés. Par exemple, pour définir la couleur de police sur bleu pour tous les éléments dont la valeur d'attribut cible est "_blank" :

a[target="_blank"] {
  color: blue;
}

3. [attribute^=value] Sélecteur d'attribut : en sélectionnant les éléments avec des valeurs d'attribut commençant par le spécifié élément de valeur auquel appliquer les styles. Par exemple, pour définir la couleur de police sur rouge pour tous les éléments dont les valeurs d'attribut href commencent par "http":

a[href^="http"] {
  color: red;
}

4. Sélecteur de pseudo-classe

Le sélecteur de pseudo-classe peut sélectionner l'état ou la position spéciale de l'élément. Les sélecteurs de pseudo-classe courants incluent :hover, :active, :focus, etc., qui sont utilisés pour sélectionner des éléments dans des états tels que le survol de la souris, l'activation, le focus, etc. Voici quelques exemples de pseudo-sélecteurs courants :

1.  : pseudo-sélecteur de survol : sélectionne l'état lorsque la souris survole l'élément. Par exemple, pour changer la couleur au survol de la souris pour tous les liens :

a:hover {
  color: purple;
}

2. :nth-child(n) Sélecteur de pseudo-classe : sélectionne le nième élément enfant d'un élément. Par exemple, pour définir la couleur d'arrière-plan des éléments des lignes paires de la liste :

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

Ce qui précède présente quelques utilisations de base et des exemples de sélecteurs CSS. J'espère que cela pourra aider les lecteurs à mieux comprendre et appliquer les sélecteurs CSS pour obtenir des résultats précis et flexibles. contrôle des styles, offrant plus de possibilités pour la conception Web.

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!