Das Ändern eines Div mit einer Klasse in ein semantisches Tag führt scheinbar dazu, dass das CSS eines anderen Elements ⇐ HTML

[Anonymous]

Ich habe eine Site mit Eleventy geschrieben und möchte weniger -Elemente verwenden. Derzeit sehen HTML und CSS für eine Seite so aus. [HINWEIS: Sie müssen zwischen dem dunklen und dem hellen Browsermodus umschalten, um das Problem in den Snippets mithilfe von Browser-Entwicklertools zu erkennen]:

Code: Select all

:root {
--accent-color: hsl(0 0% 50%);

--color-percent-dark-offset: 25;
--color-percent-light-offset: 40;

--light-hsl-value: hsl(from var(--accent-color) h s calc(l + var(--color-percent-light-offset)));
--dark-hsl-value: hsl(from var(--accent-color) h s calc(l - var(--color-percent-dark-offset)));
}

nav {
background-color: var(--light-hsl-value);

ul {
display: flex;
justify-content: space-around;
list-style-type: none;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;

li {
display: flex;

a {
padding: 10px;
}

a:link {
text-decoration: none;
color: var(--dark-hsl-value);
}

a:visited {
color: var(--dark-hsl-value);
}
}

.current-section {
border-width: 0 0 4px 0;
border-style: solid;
border-color: var(--dark-hsl-value);
}

}
}

.header-bar {
display: flex;
justify-content: center;
background-color: var(--light-hsl-value);
margin: 0;

h1 {
text-align: center;
}
}

@media (prefers-color-scheme: dark) {

.header-bar,
nav {
background-color: var(--dark-hsl-value);

h1 {
color: var(--light-hsl-value);
}

a:link,
a:visited {
color: var(--light-hsl-value);
}

.current-section {
border-color: var(--light-hsl-value);
}
}
}

Code: Select all

Pasta's Corner


[list]
[*][url=/]Home[/url]
[*][url=/blog/]Blog[/url]
[/list]

Der Schwerpunkt des Problems liegt im Tag , insbesondere wenn der Dunkelmodus aktiviert ist.
Aktueller Hellmodus:


Aktueller Dunkelmodus:


Ich möchte das -Tag in ein -Tag ändern. Ich mache das, indem ich einfach die Tags entsprechend ersetze und sonst nichts. Dies ist das Ergebnis, das ich am Ende habe.

Code: Select all

   :root {
--accent-color: hsl(0 0% 50%);

--color-percent-dark-offset: 25;
--color-percent-light-offset: 40;

--light-hsl-value: hsl(from var(--accent-color) h s calc(l + var(--color-percent-light-offset)));
--dark-hsl-value: hsl(from var(--accent-color) h s calc(l - var(--color-percent-dark-offset)));
}

nav {
background-color: var(--light-hsl-value);

ul {
display: flex;
justify-content: space-around;
list-style-type: none;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;

li {
display: flex;

a {
padding: 10px;
}

a:link {
text-decoration: none;
color: var(--dark-hsl-value);
}

a:visited {
color: var(--dark-hsl-value);
}
}

.current-section {
border-width: 0 0 4px 0;
border-style: solid;
border-color: var(--dark-hsl-value);
}

}
}

header {
display: flex;
justify-content: center;
background-color: var(--light-hsl-value);
margin: 0;

h1 {
text-align: center;
}
}

@media (prefers-color-scheme: dark) {

header,
nav {
background-color: var(--dark-hsl-value);

h1 {
color: var(--light-hsl-value);
}

a:link,
a:visited {
color: var(--light-hsl-value);
}

.current-section {
border-color: var(--light-hsl-value);
}
}
}

Code: Select all

Pasta's Corner


[list]
[*][url=/]Home[/url]
[*][url=/blog/]Blog[/url]
[/list]

Ergebnis im hellen Modus:


Ergebnis im dunklen Modus:


Wie Sie sehen können, verschmelzen die Navigationslinks im dunklen Modus mit dem Hintergrund, da die Medienabfrage für das dunkle Farbschema nicht auf einige Elemente angewendet wird, die im Tag im dunklen Modus verschachtelt sind (insbesondere die Regeln a und .current-section). Ich habe keine Ahnung, was die Ursache dafür ist, aber ChatGPT deutete an, dass die Komma-Auswahlliste und die verschachtelten CSS-Regeln die Ursache seien, obwohl ich auf der MDN-Seite nichts finden konnte, was auf das spezifische Problem hindeutet. Ich habe auch versucht, die Regeln aufzuteilen, ohne Erfolg. Dies geschieht sowohl bei Firefox 145 als auch bei Edge 142. Ich kann keine Websites auf GNOME Web über WSL2 mit dunklem Modus testen.