Quels sont les sélecteurs en CSS ?

Les sélecteurs CSS incluent : 1. Sélecteur de catégorie ; 2. Sélecteur de balise ; 3. Sélecteur d'identification ; 4. Sélecteur de descendants ; 6. Sélecteur de pseudo-classe ; sélecteur ; 9. Sélecteur de frères et sœurs adjacents ; 10. Sélecteur d'attribut ; 11. Sélecteur de pseudo-éléments.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Présentation des sélecteurs CSS :

1. Sélecteur de catégorie

Le sélecteur de classe sélectionne en fonction du nom de la classe, précédé de "."

Exemple :

.demoDiv{
color:#FF0000;
}

2. Sélecteur de balises

Une page HTML complète est composée de nombreuses balises différentes, et le sélecteur de balises détermine quelles balises sont utilisées pour les styles CSS correspondants.

La déclaration de style de la balise p dans le fichier style.css est la suivante :

p{
font-size:12px;
background:#900;
color:090;
}

3 Sélecteur d'ID

Le sélecteur d'ID peut être un élément HTML marqué d'un ID spécifique. Spécifiez un style spécifique. Sélectionnez les éléments en fonction de l'ID de l'élément, qui est unique, ce qui signifie que le même ID ne peut apparaître qu'une seule fois dans la même page du document.

est marqué d'un signe "#" devant et peut être défini dans le style comme suit :

#demoDiv{
color:#FF0000;
}

4. également appelé inclusion Le sélecteur est utilisé pour sélectionner les descendants d'un élément ou d'un groupe d'éléments spécifique. La sélection de l'élément parent est placée devant et la sélection des éléments enfants est placée à l'arrière, séparés par un espace au milieu.

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

5. Sélecteur enfant

Veuillez noter la différence entre ce sélecteur et le sélecteur descendant Le sélecteur enfant ne fait référence qu'à ses descendants directs, ou vous Il peut être compris comme agissant. sur le premier descendant de l'élément enfant. Le sélecteur descendant agit sur tous les éléments descendants enfants. Les sélecteurs descendants sélectionnent avec des espaces, tandis que les sélecteurs enfants sélectionnent avec ">".

Regardons le code suivant :

Exemple de code source

CSS :

#links a {color:red;}
#links > a {color:blue;}

HTML :

<p id="links">
<a href="#">HTML中文网</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>

6. Pseudo- sélection de classe Le

doit parfois utiliser d'autres conditions en dehors du document pour appliquer le style de l'élément, comme le survol de la souris, etc. Pour le moment, nous devons utiliser des pseudo-classes. Voici la définition de pseudo-classe pour l'application liée.

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}

7. Le sélecteur universel

Le sélecteur universel est représenté par *. Par exemple :

*{
font-size: 12px;
}

signifie que la taille de police de tous les éléments est de 12px en même temps, le sélecteur universel peut également être combiné avec le sélecteur descendant.

8. Sélecteur de groupe

Lorsque plusieurs éléments ont les mêmes attributs de style, ils peuvent appeler une instruction ensemble et les éléments sont séparés par des virgules. Par exemple :

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

L'utilisation du sélecteur de groupe simplifiera considérablement le code CSS. Les éléments avec plusieurs attributs identiques peuvent être fusionnés en groupes pour la sélection et les mêmes attributs CSS peuvent être définis, ce qui améliore considérablement l'efficacité du codage. réduit également la taille des fichiers CSS.

9. Sélecteur de frères et sœurs adjacents

En plus du sélecteur d'enfant et du sélecteur de descendant ci-dessus, nous pouvons également souhaiter trouver l'un des deux frères et sœurs, comme un titre h1 L'élément est suivi de deux éléments de paragraphe p. Nous voulons localiser le premier élément de paragraphe p et lui appliquer des styles. Nous pouvons utiliser le sélecteur de frères et sœurs adjacents.

10. Sélecteur d'attribut

Vous pouvez définir le CSS en jugeant si un certain attribut de la balise html existe.

Le sélecteur d'attributs correspond en fonction des attributs de l'élément. Ses attributs peuvent être des attributs standard ou des attributs personnalisés

11 Sélecteur de pseudo-éléments

Tous les pseudo-. les sélecteurs d'éléments doivent être placés à la fin du sélecteur dans lequel le pseudo-élément apparaît, ce qui signifie que le sélecteur de pseudo-élément ne peut être suivi par aucun sélecteur dérivé.

Apprentissage recommandé :

Tutoriel vidéo 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!