Halli hallo,
ich hatte ein Problem, das ich zwar schon gelöst habe, aber nicht ganz verstehe.
Hier mal die Seite, von der ich rede. Und einen Screenshot gibt's auch noch dazu.
Ich habe in meiner main.css festgelegt, dass für alles * Grau als Schriftfarbe gilt (--var-nf-grey).
In der Galerie habe ich Fancybox 3 drin, bei der man dann die Icons und den Bildzähler nicht richtig sieht, weil der dann diese Farbe übernimmt.
Ich hab's mir dann einfach gemacht - anstatt rauszufinden, welche Klassen der Fancybox ich genau ansprechen muss, habe ich in der fancybox_adds.css für alles Schriftfarbe weiß eingestellt.
Das hat zur Folge, dass der Menübutton (der bei kleineren Browsergrößen erscheint), auch weiß wurde. Interessanterweise aber nur der, beim Text hat sich nichts verändert.
Dieser Button ist in der nav.css mit nav .icon angegeben. Ich dachte, ok, dann mach ich ein internes Stylesheet extra für den und gib ihm nochmal die graue Farbe. Da dieses Stylesheet ja dann als letztes eingelesen wird, da unter den anderen .css-Dateien eingebunden, müsste das ja klappen. Wie ihr im Screenshot aber sehen könnt, wird dieser Klasse aber die Farbe wieder gestrichen.
Es funktioniert nur, wenn ich das span mit der ID oder der Klasse .fa ganz direkt anspreche (siehe Screenshot in Rot).
Offensichtlich wird das * von der Fancybox (da nach main.css drin) an das span weitervererbt und nicht das, was ich für nav .icon deklariert habe.
Warum?