Les sélecteurs CSS (Explication des symboles)

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 外面的行1affiché 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 外面的行1et 外面的行3affiché 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