Puis-je réinitialiser une propriété CSS plutôt que de passer outre?

Question

La page web que je suis en train de travailler sur a déjà de la base des feuilles de style, dont l'une contient cette règle:

address:not(:last-child), 
fieldset:not(:last-child), 
li:not(:last-child), 
ol:not(:last-child), 
p:not(:last-child), 
table:not(:last-child), 
ul:not(:last-child) {margin-bottom: 12px}

C'est l'application de la 12px margin-bottom sur mon <p class="mainCopy"> étiquettes, ce qui ne m'intéressent pas. Je veux être en mesure de la remplacer par .mainCopy {margin-bottom: 0}, mais, évidemment, la base de la règle est plus spécifique que ma règle. Ce qui m'oblige à faire une règle qui est plus spécifique que j'ai envie ou besoin, comme p.mainCopy. Par ailleurs, j'ai parfois besoin d'avoir <li class="mainCopy">, et ce serait me forcer à ajouter un deuxième règle, pour répondre à l' <li> ainsi.

Est il possible que je peux il suffit de réinitialiser cette propriété, ou d'inverser la problématique CSS déclaration?

Answer 1

Depuis address:not(:last-child) et semblables a 11 points de spécificité, vous pouvez dupliquer le nom de classe pour la rendre plus forte. Par exemple, la déclaration suivante est totalement valide, et il dispose de 20 points de la spécificité:

.mainCopy.mainCopy {
     margin-bottom: 0;
}

Et vous devez ajouter un seul mainCopy dans votre code html:

<ul class="mainCopy">

Modifier

Prendre soin sur les "points" de la spécificité, car il n'y a pas de virgule décimale. Elles sont au nombre de postes par la spécificité. Par exemple:

 address:not(:last-child) /* is 0-0-1-1 specificity (1 tagname, 1 pseudoclass) */
 .mainCopy.mainCopy /* is 0-0-2-0 specificity (2 classnames) */

Answer 2

Il existe la propriété suivante:

all: unset;

Qui, je crois, peut être utilisé comme:

.mainCopy {
    all: unset;
    margin-bottom: 0
}

https://developer.mozilla.org/en/docs/Web/CSS/unset

EDIT: en Fait, je crois, en raison de la spécificité de votre problème spécifique, peuvent ne pas fonctionner.

Answer 3

Pour répondre à votre question (plutôt que de résoudre votre problème)...

Puis-je réinitialiser une propriété CSS plutôt que de passer outre?

Réinitialiser à quoi?

Le C de CSS signifie en cascade et vous aurez toujours plusieurs couches de styles combinant entre eux, précisément, bien que pas toujours immédiatement des règles claires. Outre les styles définis par l'auteur du site à des endroits différents (fichiers CSS externes, <style> blocs, style="" attributs...), dans la ligne de base, nous allons trouver l'builtin styles de navigateur et autant que je sache, les fournisseurs de navigateur sont libres d'attribuer quels que soient les styles par défaut de leur choix, et souvent, les utilisateurs peuvent ajouter leurs propres styles à la soupe, soit avec builtin paramètres ou avec des add-ons. Même le soi-disant réinitialise CSS ne fait pas de reset quoi que ce soit. Ils suffit d'ajouter encore une autre couche de styles au-dessus du reste.

Il n'y a pas de syntaxe pour "Créer une capture d'écran ici" (ce qui serait la seule solution que je peux penser sans une analyse approfondie) donc la réponse est fondamentalement pas.

Answer 4

Vous pouvez ajouter un autre :pas de règle pour tous les sélecteurs où vous souhaitez exclure .mainCopy pour avoir de la marge

address:not(:last-child):not(.mainCopy), 
fieldset:not(:last-child):not(.mainCopy), 
li:not(:last-child):not(.mainCopy), 
ol:not(:last-child):not(.mainCopy), 
p:not(:last-child):not(.mainCopy), 
table:not(:last-child):not(.mainCopy), 
ul:not(:last-child):not(.mainCopy) {
  margin-bottom: 12px
}

Answer 5

Utilisez le sélecteur universel * précédée d' body balise.

body *.[<'className'>] {}

---

Ou tout simplement précéder votre classe avec l' body balise.

body .[<'className'>] {}

---

Les deux sont en fait le même, utilisez celui que vous voyez l'ajustement et/ou plus facile à repérer pour l'entretien.

---

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {
  margin-bottom: 12px;
  color: red;
}
body *.mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>body *.mainCopy {}</code>
</main>

---

Si vous êtes paranoïaque, vous pouvez même utiliser:

html .[<'className'>] {}

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {
  margin-bottom: 12px;
  color: red;
}
html .mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>html .mainCopy {}</code>
</main>