Ich stieß auf ein ungewöhnliches Problem mit dynamischen Grenzen in CSS. Ich versuche, eine bestimmte Seite eines Rahmens, der deaktiviert wurde, wiederherzustellen / anzuzeigen, indem ich entweder seine Breite auf null border-left-width:0; oder auf border-left:none;
Das Problem ist, dass ich nicht die gleichen Rahmeneigenschaften wiederholen möchte, da es eine adaptive dynamische Lösung sein sollte, bei der der verborgene Rahmen erben soll das bereits gesetzte Element Grenze.
Beispielcode: JSFiddle
Beobachtung 1: Eine Rahmenseite erbt nicht den "übergeordneten" Rahmen
Beobachtung 2: Die Verwendung von initial setzt den Rand auf den Standard-Browser zurück (ich denke, das ist logisch)
Die Frage ist also wirklich, ob eine verborgene / deaktivierte Randseite mit reinem CSS angezeigt werden kann, ohne die border -Eigenschaft zweimal zu wiederholen?
Die Frage ist also wirklich, ob eine verborgene / deaktivierte Randseite mit reinem CSS angezeigt werden kann, ohne die border -Eigenschaft zweimal zu wiederholen?
Ich vermute, Ihre eigentliche Frage ist, wie in Ihren Kommentaren angegeben,
Interessant, eine Klassenumschaltung macht den Trick, gibt es jetzt eine Möglichkeit, das durch css override anstelle von Klasse zu simulieren?
... worauf die Antwort lautet, nein, weil die Kaskade nicht funktioniert. Ein Element kann immer nur einen Wert für eine Eigenschaft haben. Entweder hat ein Element einen Rahmen, oder nicht, und dies wird durch Auflösen von all Grenzdeklarationen, die mit diesem Element übereinstimmen, und Herausfinden, welches eins ist, bestimmt der übereinstimmenden Deklarationen gewinnt.
inherit funktioniert nicht, weil es keinen übergeordneten Rahmen gibt, von dem er erben kann. (Technisch gesehen gibt es nur den Anfangswert von medium none currentColor , und das wird vererbt.)
initial funktioniert nicht, da wiederum die Anfangswerte von border-width und border-style medium bzw. none sind - und nur einer von ihnen deaktiviert tatsächlich den Rahmen; der andere setzt es auf eine beliebige Breite ungleich Null . (Auch Das hat nichts mit Browser-Standardeinstellungen zu tun .)
Die einzige Möglichkeit, zwischen mehreren möglichen Werten für eine CSS-Eigenschaft umzuschalten, besteht darin, jeden Wert in einem von mehreren möglichen Klassennamen zu deklarieren, die Sie demselben Element zuweisen:
%Vor% ... welches auch übergeordnete Regeln verwendet, außer wie vorgesehen. Die erste Regel entspricht garantiert dem Element, solange es ein div ist; Die letzten beiden Regeln stimmen nur überein, wenn die Klassennamen vorhanden sind, und überschreiben die erste, da sie spezifischer sind, aber die erste Regel und die Werte, die durch ihre Kurzschriftdeklaration angegeben werden, sind unangetastet, und ihre Wiederherstellung besteht lediglich darin, die Klassennamen wegzulassen oder zumindest nach der Tat entfernen.
Border ist kein Elternteil. Wenn Sie border:5px dashed #abd4b1; anwenden, wird der gesamte Rahmen auf diesen Stil festgelegt. Etwas wie,
Wenn Sie border-right:none; anwenden, gibt es keinen Speicher mehr für den früheren Stil.
Versuchen Sie, es in umgekehrter Reihenfolge anzuwenden.
%Vor%Die Frage ist also wirklich, ob eine versteckte / deaktivierte Randseite angezeigt werden kann Verwenden Sie reines CSS, ohne die Eigenschaft border zweimal zu wiederholen?
Nein, das kannst du nicht. Sie können es auf seinen ursprünglichen Zustand zurücksetzen, aber nicht auf den Stil, den Sie festlegen möchten. Du musst es wiederholen.
%Vor%Sie können mit LESS den Stil als Variable speichern und wiederverwenden. Aber das ist kein reines CSS.