Guide des propriétés du sélecteur CSS : sélecteurs d'identifiant, de classe et d'attribut

Guide des propriétés du sélecteur CSS : sélecteurs d'identifiant, de classe et d'attribut

CSS (Cascading Style Sheets) est un langage utilisé pour décrire la manière dont les éléments d'une page Web sont rendus et disposés. En CSS, les sélecteurs sont utilisés pour sélectionner des éléments HTML spécifiques, puis appliquer des règles de style.

Cet article se concentrera sur trois attributs de sélecteur courants : l'identifiant, la classe et le sélecteur d'attribut, et fournira des exemples de code spécifiques.

1. id selector

id selector est utilisé pour sélectionner des éléments avec un attribut id spécifique, qui doit être unique en HTML. En CSS, la syntaxe d'un sélecteur d'identifiant consiste à faire précéder le nom du sélecteur d'un symbole #. Voici un exemple :

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

Le code ci-dessus représente un élément div avec l'identifiant "header", dont la couleur d'arrière-plan est bleue et la couleur du texte est blanche.

2. sélecteur de classe

le sélecteur de classe est utilisé pour sélectionner des éléments avec des attributs de classe spécifiques. Un élément peut avoir plusieurs attributs de classe, et plusieurs éléments peuvent partager le même attribut de classe. En CSS, la syntaxe d'un sélecteur de classe consiste à ajouter le symbole . avant le nom du sélecteur. Voici un exemple :

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Le code ci-dessus représente un élément p de classe "highlight". Sa couleur de fond est jaune et le texte est en gras.

3. Sélecteur d'attribut

Le sélecteur d'attribut est utilisé pour sélectionner des éléments avec des attributs spécifiques et peut être sélectionné en fonction des valeurs d'attribut. En CSS, la syntaxe des sélecteurs d'attributs se présente sous de nombreuses formes. Voici quelques exemples :

• Sélectionnez des éléments avec des attributs spécifiques :

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

Le code ci-dessus signifie sélectionner tous les éléments a avec des attributs href et définir la couleur de leur texte sur bleu.

• Sélectionnez des éléments avec des attributs et des valeurs d'attribut spécifiques :

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

Le code ci-dessus signifie sélectionner tous les éléments d'entrée dont l'attribut type est "texte" et définir leur largeur sur 200px.

• Sélectionnez les éléments commençant par une valeur d'attribut spécifique :

<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

Le code ci-dessus signifie sélectionner tous les éléments img dont la valeur d'attribut src commence par "images/" et leur ajouter une bordure grise.

Résumé :

En utilisant des sélecteurs d'identifiant, de classe et d'attribut, nous pouvons sélectionner plus précisément les éléments de la page Web et leur appliquer des styles spécifiques. Dans le développement réel, une utilisation flexible de ces sélecteurs peut améliorer la réutilisabilité et la maintenabilité de CSS.

Ce qui précède est une brève introduction au guide des propriétés du sélecteur CSS et fournit des exemples de code correspondants. J'espère qu'il sera utile à tout le monde de comprendre et d'utiliser les sélecteurs 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!