Tout d'abord, l'espace (progéniture)
- écriture
.class1 .class2{
...
}
- effet
Tous les éléments à l'intérieur du récipient contenant l'action sélectionnée de class2 Class1
- Exemples
<style>
.class1 .class2{
background-color:#f00;
}
</style>
<div class="class1">
<p class="class2">第一行</p>
<p>第二行</p>
<div>
<p class="class2">第三行</p>
</div>
</div>
<p class="class2">外面的行</p>
L'effet est le suivant: la première rangée et la troisième rangée est un fond rouge
Plus de> (descendants)
- écriture
.class1 > .class2{
...
}
- effet
Sélectionnez l'élément parent est Class1, élément enfant class2 à l'élément
- Exemples
<style>
.class_1 > .class_2{
background-color:#f00;
}
</style>
<div class="class_1">
<p class="class_2">第一行</p>
<p class="class_2">第二行</p>
<div>
<p class="class_2">第三行</p>
</div>
</div>
<p class="class_2">外面的行</p>
- Effet: seuls les première et seconde rangées fond rouge
Troisièmement, le signe plus + (proche des frères)
- écriture
.class1 + .class2{
...
}
- effet
Sélectionnez l'élément de class2 immédiatement classe 1
- Exemples
<style>
.class1 + .class2{
background-color:#f00;
}
</style>
<div class="class1">
<p class="class2">第一行</p>
<p class="class2">第二行</p>
<div>
<p class="class2">第三行</p>
</div>
</div>
<p class="class2">外面的行1</p>
<p class="class2">外面的行2</p>
- Effet: Seulement
外面的行1
affiché en rouge
Quatrièmement, un tilde (Brother)
- écriture
.class1 ~ .class2{
...
}
- effet
Tous les frères et sœurs class2 classe1 Après avoir sélectionné les éléments
- Exemples
<style>
.class1 ~ .class2{
background-color:#f00;
}
</style>
<div class="class1">
<p class="class2">第一行</p>
<p class="class2">第二行</p>
<div>
<p class="class2">第三行</p>
</div>
</div>
<p class="class2">外面的行1</p>
<div>
<p class="class2">外面的行2</p>
</div>
<p class="class2">外面的行3</p>
- Effet: Il
外面的行1
et外面的行3
affiché en rouge
Cinquièmement, non signé (principalement pour l'union étiquetée)
- écriture
标签div/p.class2{
...
}
- effet
élément de balise, et correspond à la relation « et », tout CLASS2 sélectionner l'étiquette correspondante;
- Exemples
<style>
p.class2{
background-color:#f00;
}
</style>
<div class="class2">
<p class="class2">第一行</p>
<p>第二行</p>
<div>
<p class="class1.class2">第三行</p>
</div>
</div>
<p class="class2">外面的行</p>
L'effet est: Seul 第一行
et 外面的行
fond rouge
Sixièmement, la virgule (caractère normal exclu, la sélection d'une pluralité d'éléments)
- écriture
.class1 , .class2{
...
}
- effet
Équivalent à deux déclarations les mêmes valeurs de sélecteurs de classe, comme Class1 et l'effet class2, aucune relation entre le père et ses fils
- Exemples
<style>
.class1 , .class2{
background-color:#f00;
}
</style>
<div>
<p class="class2">第一行</p>
<p>第二行</p>
<div>
<p class="class1">第三行</p>
</div>
</div>
<p class="class2">外面的行</p>
L'effet est: Seul 第一行
et 外面的行
fond rouge