interface Webtutoriel CSSQuelle est la différence entre définir CLASS en CSS avec et sans espaces ?Quelle est la différence entre définir CLASS en CSS avec et sans espaces ?
.example .pp{ color: orange;
}.example.pp2 { color: green;
}
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>
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>.example.pp sélectionne les éléments qui contiennent à la fois example et pp dans la classe.
Par exemple :
<div class="example pp"> 被选择的元素 </div>
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>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!
Draggin & # 039; et droppin & # 039; en réactionApr 17, 2025 am 11:52 AML'écosystème React nous offre de nombreuses bibliothèques qui se concentrent sur l'interaction de la glisser et de la chute. Nous avons react-dnd, react-beeufuly-dnd,
Logiciel rapideApr 17, 2025 am 11:49 AMIl y a eu des choses merveilleusement interconnectées à propos des logiciels rapides ces derniers temps.
Gradients imbriqués avec un clip de fondApr 17, 2025 am 11:47 AMJe ne peux pas dire que j'utilise souvent le clip de fond. Je ne parierai presque presque jamais dans le travail CSS au jour le jour. Mais je me suis souvenu de cela dans un post de Stefan Judis,
Utilisation de la réalisation de demandes avec des crochets ReactApr 17, 2025 am 11:46 AML'animation avec des demandes de châssis devrait être facile, mais si vous n'avez pas lu de manière approfondie de la documentation de React, vous rencontrerez probablement quelques choses
Besoin de faire défiler en haut de la page?Apr 17, 2025 am 11:45 AMPeut-être le moyen le plus simple d'offrir cela à l'utilisateur est un lien qui cible un ID sur l'élément. Tellement comme ...
La meilleure API (GraphQL) est celle que vous écrivezApr 17, 2025 am 11:36 AMÉcoutez, je ne suis pas un expert GraphQL mais j'aime travailler avec. La façon dont elle expose les données en tant que développeur frontal est assez cool. C'est comme un menu de
Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampliApr 17, 2025 am 11:26 AMAu cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S
Diverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreApr 17, 2025 am 11:19 AMJ'ai récemment remarqué un changement intéressant sur Codepen: sur le plan des stylos sur la page d'accueil, il y a un rectangle avec des coins arrondis se développant dans le dos.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Version Mac de WebStorm
Outils de développement JavaScript utiles
Dreamweaver CS6
Outils de développement Web visuel
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
