Présentation des sélecteurs CSS-tutoriel CSS-php.cn

Présentation des sélecteurs CSS

DDD

Libérer： 2025-01-22 00:13:10

original

355 Les gens l'ont consulté

Cette leçon aborde l'amélioration des visuels HTML à l'aide de feuilles de style en cascade (CSS). Nous commencerons par les sélecteurs CSS – les outils permettant de cibler des éléments HTML spécifiques.

Feuilles de style en cascade (CSS)

CSS dicte l'apparence des composants HTML : couleur, espacement, taille, etc. Bien que vous puissiez styliser des éléments individuels à l'aide d'attributs style en ligne (par exemple, ), cela est inefficace pour les grands sites Web.

Une approche plus efficace consiste à utiliser un élément <style> dans la section <head> de votre HTML ou un fichier CSS distinct (comme style.css) lié à votre HTML à l'aide de <link> :

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>

Copier après la connexion

ou

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>

Copier après la connexion

<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>

Copier après la connexion

Cela applique le même style à tous les  éléments. Les outils de développement du navigateur (par exemple, clic droit, « Inspecter » dans Chrome) vous permettent d'examiner et de modifier les styles appliqués à des fins de dépannage.

Sélection des éléments HTML

Le p dans p { color: red; } sélectionne tous les  éléments. Pour les structures plus complexes, les attributs id et class permettent un contrôle plus fin.

Sélecteurs de classe et d'identification

Chaque élément peut avoir un id unique. Les sélecteurs d'ID (#idName) ciblent les éléments par leur id. Cependant, les id doivent être uniques, ce qui limite leur flexibilité.

Les cours offrent une plus grande polyvalence. Plusieurs éléments peuvent partager la même classe. Les sélecteurs de classe (.className) ciblent les éléments avec cette classe. Les éléments peuvent avoir plusieurs classes (par exemple, ).

.red-text { color: red; } stylise tous les éléments avec la classe red-text. p.red-text stylise spécifiquement uniquement les éléments  avec red-text.

Sélecteurs de combinateurs

Le Document Object Model (DOM) représente la structure de la page sous forme d'arborescence. Les sélecteurs combinateurs exploitent cette hiérarchie.

div p : sélectionne tous les éléments  au sein des éléments <div> (descendants).
div > p : Sélectionne uniquement les éléments  enfants directs des éléments <div>.
p span : Sélectionne le  immédiatement après un .
p ~ span : Sélectionne tous les  frères et sœurs suivant un .

Les combinaisons de combinateurs trop complexes sont déconseillées. Vous pouvez les combiner avec des sélecteurs de classe (par exemple, .intro p).

Pseudo-sélecteurs

Les sélecteurs de pseudo-classe stylisent les éléments en fonction de leur état (par exemple, a:hover, a:active, a:visited). Les sélecteurs de pseudo-éléments ciblent des parties d'un élément (par exemple, ::first-letter).

Autres sélecteurs

* : Le sélecteur universel, sélectionnant tous les éléments.
Sélecteurs de groupe (par exemple, h1, h2, p) : sélectionnez plusieurs types d'éléments.
Sélecteurs d'attributs (par exemple, p[lang], p[lang="en"]) : sélectionnez des éléments en fonction des attributs.

Lectures complémentaires :