Quelle est la différence entre définir CLASS en CSS avec et sans espaces ?-tutoriel CSS-php.cn

Quelle est la différence entre définir CLASS en CSS avec et sans espaces ?

黄舟

Libérer： 2017-07-22 09:42:04

original

2738 Les gens l'ont consulté

.example .pp{  color: orange;
}.example.pp2 {  color: green;
}

Copier après la connexion

Par exemple, les deux définitions ci-dessus sont l'une avec des espaces au milieu et l'autre sans espaces au milieu.

第一个class要这样写生效：<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效：<p class="example pp2">pp2这个class生效</p>

Copier après la connexion

Excusez-moi, pourquoi ça ? ?

.example .pp = E F est le sélecteur descendant.

.example.pp2 est sur un élément, et cet élément n'aura d'effet que s'il inclut ces deux classes.

Il y a une différence entre les deux, une grande différence !

.example .pp est séparé par un espace, indiquant le sélecteur de descendant, et le .pp dans .example est sélectionné.
Par exemple :

<div class="example">
    <div class="pp">被选择的元素</div>
</div>

Copier après la connexion

.example.pp sélectionne les éléments qui contiennent à la fois example et pp dans la classe.
Par exemple :

<div class="example pp">
被选择的元素
</div>

Copier après la connexion

C'est le format d'un sélecteur CSS, qui stipule que les conditions de sélection sans espaces sont dans une relation "et", et celles avec des espaces sont dans une relation "parent- relation enfant", et peut être indirecte. La relation "père et fils"

<style>
.e1.e2{
background-color:yellow;
}
.father .e3{
background-color:green;
}
</style>
</head>
<body>
<div class="father">
<p class="e1 e2">我住在 Duckburg。</p>
<p class="e3">我也住在 Duckburg。</p>
<div>
<p class="e3">他也住在 Duckburg。</p>
</div>
</div>
</body>

Copier après la connexion

Le premier paragraphe p du code ci-dessus a deux classes, e1 et e2. Notez que les espaces dans l'attribut class et le Les espaces en CSS ont des significations différentes. Les espaces dans l'attribut class ont des significations différentes. L'espace est la relation entre "et", et l'espace dans le CSS que nous venons de mentionner est la relation entre "parent et descendant".

Le premier p est rendu en jaune car CSS utilise le sélecteur .e1.e2 pour définir cette couleur. Autrement dit, ce paragraphe a les deux classes. Bien sûr, le même effet peut être obtenu en utilisant uniquement .e1 au lieu de .e1.e2 en CSS, mais parfois nous ne voulons pas que le sélecteur CSS frappe accidentellement d'autres balises, nous l'écrivons donc simplement en détail.

Le deuxième p est rendu vert par .father .e3 car la classe de ce p est e3 et c'est le descendant de la balise avec la classe père, donc il est teint en vert.

De même, le troisième p, bien que n'étant pas une sous-classe directe du père, devient également vert, indiquant que ce sélecteur avec des espaces peut inclure des descendants indirects.

La différence a été clairement expliquée ci-dessus. Laissez-moi vous expliquer pourquoi parfois plusieurs sélecteurs de classe sont nécessaires pour sélectionner un élément
1 La traduction chinoise de CSS est une feuille de style en cascade, et son style est basé sur. Héritez et remplacez pour produire le style final.
2. Il existe un ensemble de règles pour le calcul du poids du style CSS. Celui qui a le plus de poids est le style final, donc parfois, afin d'écraser le style précédent, nous augmentons le poids en ajoutant un sélecteur de classe pour le représenter. élément

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!