Ich erstelle eine Tab-ähnliche Funktionalität mit <ul> und <li> Elemente, und ich bemerkte diese Art von unerwartetem Verhalten mit CSS background-color: inherit.
Man würde erwarten, dass inherit würde eigentlich nicht bedeuten transparent, sondern child.background-color == parent.background-color (vergeben Sie den Pseudocode).CSS Inherit für unbekannte Hintergrundfarbe ist eigentlich transparent
Mein Code ist ziemlich einfach, aber ich habe ein Problem: Ich entwickle für variable Bedingungen. Das bedeutet, dass ich nie wissen könnte, welche Hintergrundfarbe mit meinem Code verwendet wird, und ich möchte nicht meine eigene vorstellen.
Ich habe eine JSFiddle vorbereitet, in der der Hintergrund zufällig auf Seite geladen wird, um die Zufälligkeit des Ziels meines Codes nachzuahmen. Das offensichtliche Problem ist, dass die aktive Registerkarte mit ihrer Hintergrundfarbe voreingestellt aussieht. Also habe ich es in background-color: inherit geändert. (Siehe JSFiddle 2)
Während dies offensichtlich den Hintergrund Problem gelöst, die Grenze des Elements unter (cg_content) begann wieder zu zeigen, weil die inherit Eigenschaft, wie transparent wirkt, statt, was es tut, wenn es eine Reihe Hintergrund- ist Farbe.
Frage ist: Gibt es eine Möglichkeit, es die tatsächliche Hintergrundfarbe ohne Javascript erben?
Wenn nicht, könnten Sie einen besseren Weg vorschlagen, um diese Registerkarten ohne voreingestellte Farben gut aussehen zu lassen?
S.S .: Der Inhalt <div> sollte kein untergeordnetes Element der <li> Elemente sein, da diese Registerkarten einige Inhalte teilen.
P.S.2: Ich kann es nicht klarer machen, dass ich offensichtlich weiß, wie man das mit JS macht. Ich will es einfach nicht.
Ich würde auch empfehlen, den Container div für die ul. Loszuwerden. Wenn Sie es entfernen, ändert sich das Ergebnis überhaupt nicht und Sie müssen keine neue CSS-Regel und ein anderes Element mit einer ID erstellen. – Cadoc
Danke @Quentin. Das ist in der Tat eine Lösung für die vereinfachte Version meines Codes. Aber im realen Beispiel kann mein Code Teil eines Ururgroßkindes des Elements mit der tatsächlichen Hintergrundfarbe sein, und ich habe keine CSS-Kontrolle für die Elemente dazwischen. Irgendeine Idee damit? – mavrosxristoforos
In CSS gibt es keine Möglichkeit, ein Element dazu zu bringen, seinen Hintergrund von einem beliebigen anderen Element (oder sogar einem Vorfahren) zu übernehmen. Sie können entweder spezifisch sein oder Sie können vom übergeordneten Element erben. – Quentin