Kann ich eine CSS-Eigenschaft zurücksetzen, anstatt sie zu überschreiben?

Lesezeit: 7 Minuten

Benutzer-Avatar
Liran H

Die Webseite, an der ich arbeite, hat bereits einige Basis-Stylesheets, von denen eines diese Regel enthält:

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}

Dies wendet den 12-Pixel-Rand unten auf meine an <p class="mainCopy"> Tags, an denen ich nicht interessiert bin. Ich möchte es mit überschreiben können .mainCopy {margin-bottom: 0}, aber offensichtlich ist die Grundregel spezifischer als meine Regel. Dies zwingt mich, eine Regel zu erstellen, die spezifischer ist, als ich möchte oder brauche, wie z p.mainCopy. Außerdem muss ich manchmal haben <li class="mainCopy">und dies würde mich zwingen, eine zweite Regel hinzuzufügen, um dem gerecht zu werden <li> auch.

Gibt es eine Möglichkeit, diese Eigenschaft einfach zurückzusetzen oder die problematische CSS-Deklaration rückgängig zu machen?

  • Entweder können Sie eine Override-Klasse *.margin-override{margin:0} erstellen, die spezifischer wäre, oder Sie tun, was Sie in der Frage sagen, und überschreiben einfach das eine bestimmte Element. Leider gibt es keine Möglichkeit, einen Selektor zurückzusetzen oder zurückzusetzen.

    – Kyle

    16. November 2016 um 11:06 Uhr

  • Niemals Verwenden Sie !wichtig. Oder Inline-Stile.

    – Kyle

    16. November 2016 um 11:09 Uhr


  • @Leothelion, Inline-Stile haben die höchste Spezifität: 1.000. Zum Thema Spezifität empfehle ich folgenden Artikel: css-tricks.com/specifics-on-css-specificity

    – Liran H

    16. November 2016 um 11:17 Uhr

  • Zu Ihrer genauen Frage … Auf was zurücksetzen? Das C in CSS steht für Kaskadierung und Sie haben immer mehrere Ebenen von Stilen, die sich untereinander kombinieren. Es gibt keine Syntax für “Erstelle hier einen Snapshot”.

    – Alvaro González

    16. November 2016 um 11:25 Uhr

  • @kyle, was ist mit Hilfsklassen? !important ist nützlich, um sicherzustellen, dass eine Eigenschaft immer angewendet wird, wie z. B. float-left/float-right-Hilfsklassen. Zu sagen, dass man sie NIEMALS benutzen soll, ist ein schlechter Ratschlag, aber das Gefühl, das Sie zu vermitteln versuchen, ist richtig. In 99,9 % der Fälle sollten Sie es nicht verwenden.

    – BSG

    16. November 2016 um 12:38 Uhr

Benutzer-Avatar
Marcos Perez Gude

Seit address:not(:last-child) und ähnliches hat 11 Besonderheiten können Sie den Klassennamen duplizieren, um ihn stärker zu machen. Zum Beispiel ist die folgende Deklaration absolut gültig und hat sie 20 Besonderheiten:

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

Und Sie müssen nur einen hinzufügen mainCopy in deinem html:

<ul class="mainCopy">

Bearbeiten

Achten Sie auf die “Punkte” der Spezifität, da es keine Dezimalstellen gibt. Sie sind Zahlenpositionen nach der Besonderheit. Zum Beispiel:

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

  • @marcos, ich habe den Grund gefunden, warum das funktioniert. Es wird anscheinend ausdrücklich in der CSS3-Spezifikation erwähnt und sollte meines Wissens nach auch in CSS2 funktionieren. Siehe diesen Thread: stackoverflow.com/questions/11572081/…

    – Liran H

    16. November 2016 um 12:03 Uhr

  • Während dies für das gegebene Beispiel funktioniert, ist es zu spezifisch und das Befolgen dieser Praxis führt zu Spezifitätskriegen. Ihr Selektor sollte so gewählt werden, dass er die erforderliche Anforderung erfüllt und nicht mehr. In diesem Fall entweder der Ansatz von @Marileen oder eine Überschreibung von .mainCopy, p.mainCopy { ... } ist wahrscheinlich am besten geeignet, hängt jedoch von den genauen Anforderungen des OP ab.

    – Alohci

    16. November 2016 um 12:49 Uhr

  • Diese Lösung ist weder falsch noch ein Trick. Eignet sich perfekt, um einem einzelnen Klassennamen eine hohe Priorität einzuräumen. Sie können x3 und mehr wiederholen und es ist immer noch in Ordnung. Die Lösung p.mainCopy ist weniger Leistung und Sie können es nicht für ein anderes Tag als wiederverwenden p, Sie müssen also zwingend einen pro Tag schreiben. Weil ich denke, dass meine Lösung besser ist.

    – Marcos Perez Gude

    16. November 2016 um 14:02 Uhr


  • @apsillers Es gibt Unmengen im Internet, Sie können wählen, was Ihnen gefällt. Zwei Beispiele: smashingmagazine.com/2007/07/… || css-tricks.com/specifics-on-css-specificity || Und ein Taschenrechner: Spezifität.keegan.st

    – Marcos Perez Gude

    16. November 2016 um 16:45 Uhr

  • Vielen Dank! Aus den von Ihnen angegebenen Links habe ich die W3-Spezifikation gefunden: w3.org/TR/selectors/#specificity.

    – Apsiller

    16. November 2016 um 16:48 Uhr

Benutzer-Avatar
ESR

Es existiert folgende Eigenschaft:

all: unset;

Was meiner Meinung nach so verwendet werden kann:

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

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

BEARBEITEN: Eigentlich glaube ich, dass dies aufgrund der Besonderheit Ihres spezifischen Problems möglicherweise nicht funktioniert.

  • Warnung: Keine IE11-Unterstützung

    – Kos

    16. November 2016 um 15:56 Uhr

Um deine Frage zu beantworten (anstatt dein Problem zu lösen)…

Kann ich eine CSS-Eigenschaft zurücksetzen, anstatt sie zu überschreiben?

Zurücksetzen auf was?

Das C in CSS steht für Cascading und Sie haben immer mehrere Ebenen von Stilen, die sich mit genau definierten, wenn auch nicht immer sofort klaren Regeln verbinden. Abgesehen von den vom Seitenautor an verschiedenen Stellen festgelegten Stilen (externe CSS-Dateien, <style> Blöcke, style="" Attribute …), in der Grundlinie finden wir die eingebauten Browser-Stile und soweit ich weiß, können Browser-Anbieter frei wählen, welche Standardstile sie wählen – und oft können Benutzer ihre eigenen Stile zur Suppe hinzufügen, entweder mit integrierte Einstellungen oder mit Add-Ons. Auch die sog CSS-Resets eigentlich nicht zurücksetzen irgendetwas. Sie fügen lediglich eine weitere Ebene von Stilen hinzu.

Es gibt keine Syntax für “Hier einen Snapshot erstellen” (was die einzige Lösung wäre, die mir ohne eine gründliche Analyse einfällt), also lautet die Antwort im Grunde nein.

  • Das ist die richtige Antwort auf meine Frage. Danke Alvaro.

    – Liran H

    17. November 2016 um 21:59 Uhr

Sie können allen Selektoren, bei denen Sie .mainCopy ausschließen möchten, um den Rand zu haben, eine weitere :not-Regel hinzufügen

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
}

Benutzer-Avatar
Ricky

Verwenden Sie die universeller Wahlschalter * vorangestellt von body Schild.

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

Oder stellen Sie Ihrer Klasse einfach das voran body Schild.

body .[<'className'>] {}

Beide sind eigentlich gleich, verwenden Sie die, die Sie für geeignet halten und / oder für die Wartung leichter zu erkennen sind.


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>

Wenn Sie paranoid sind, können Sie sogar Folgendes verwenden:

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>

  • Danke Ricky. Ich bin mit dieser Lösung vertraut (habe nur vergessen, sie zu erwähnen), suchte aber nach einer Lösung, die verhindert, dass ich in meinen Selektoren spezifischer als “.mainCopy” sein muss.

    – Liran H

    17. November 2016 um 21:57 Uhr

Benutzer-Avatar
AGDM

Ich neige dazu, mit initial als Eigenschaftswert zu gehen.

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: initial}

  • Danke Ricky. Ich bin mit dieser Lösung vertraut (habe nur vergessen, sie zu erwähnen), suchte aber nach einer Lösung, die verhindert, dass ich in meinen Selektoren spezifischer als “.mainCopy” sein muss.

    – Liran H

    17. November 2016 um 21:57 Uhr

1205610cookie-checkKann ich eine CSS-Eigenschaft zurücksetzen, anstatt sie zu überschreiben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy