Maison > interface Web > tutoriel CSS > La bonne façon d'utiliser les sélecteurs CSS

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

WBOY
Libérer: 2024-01-13 10:38:06
original
1083 Les gens l'ont consulté

La bonne façon dutiliser 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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion

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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion

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;
}
Copier après la connexion
  1. [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;
}
Copier après la connexion
  1. [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;
}
Copier après la connexion

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;
}
Copier après la connexion
  1. :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;
}
Copier après la connexion

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!

É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