J'essaie de créer un code CSS dans SASS pour un site WordPress où j'ai écrit mes styles pour le contenu affiché dans un conteneur appelé "Contenu de l'autre".
J'ai créé des blocs personnalisés et les donné une classe standard tout ce qu'on appelle "Mnnk-block". P>
Ce que je veux, c'est, des éléments à l'intérieur de mes blocs (tels qu'un code> ou
code> par exemple), n'utilisez pas les styles de «contenu .try» parent si placé à l'intérieur de ce conteneur. Je pensais utiliser le : non () code> La classe de pseudo serait la voie appropriée, mais cela ne fonctionne tout simplement pas. P> .mnk-block {
h2 {
color: red;
}
}
.entry-content {
:not(.mnk-block) {
h2 {
color: blue;
}
}
3 Réponses :
La commande Depuis que les extraits ici n'acceptent pas SASS, j'utilise régulièrement CSS: vous pouvez omettre le p> : pas code> si Vous définissez d'abord une règle pour h2 code> (ou tout autre élément) dans .try-contenu code>, puis ajoutez une règle pour H2 code> en tant qu'enfant de .mnk-block code> qui écrasera la précédente: p>
<div class="entry-content">
<h2>My title</h2>
<div class="mnk-block">
<h2>My block title</h2>
</div>
</div>
Comme je l'ai commenté ci-dessous, c'est un bon point qui ne m'a pas rencontré, vous avez tous deux déclaré le même point (correct). Mais comment le faire en ne sélectionnant pas les éléments enfants en utilisant: non ()? (Voir commentaire que j'ai laissé sur @alan Lins Répondre) Merci!
Eh bien, .try-content: non (block .mnk) H2 serait un sélecteur valide, mais le problème est: dans ce cas, il y a a être < I> Quelque élément entre .Entry-contenu et h2 - il ne s'appliquerait pas à un H2 qui est un direct enfant de .Trytry-content . Afin que vous puissiez utiliser .try-contenu: non (.mnk-block) H2, .Trong-contenu> H2 {...} , mais je doute si c'est moins compliqué
Ok merci, je pense que au lieu de rendre ces plus simples, je viens de compliquer avec essayer d'utiliser: non () - Je vais utiliser votre suggestion.
J'utiliserai l'exemple de Pure CSS pour l'expliquer. CSS donne la priorité à la dernière instruction déclarée. Donc, si vous déplacez le «bloc .mnk» en bas, il remplacera le contenu de l'entrée H2 dans le bloc .mnk. Si vous essayez le code ci-dessous, le contenu de l'entrée H2 sera bleu, tandis que le bloc Mnk-Block H2 sera rouge Toutefois, vous utilisez ce code ci-dessous, tout sera bleu, car la Dernières instructions était la contenue H2 P> .entry-content > h2{
color: blue;
}
C'est un bon point qui ne m'a pas rencontré, car je me perdais pour essayer de comprendre la classe: non () pseudo classe. Cependant, comment j'utiliserais: non () pour ne pas appliquer les styles chez l'enfant? Je dis cela parce que nous avons beaucoup de blocs que nous écrivons et il semble que plus de temps prend beaucoup de temps pour refluer tous les styles de ces éléments d'enfant pour les remplacer.
S'il vous plaît essayez ce
CSS fort> p> SCSS strong> p> .mnk-block h2{
color: red;
}
.entry-content:not(h2){
color: blue;
}