Изменение div с классом на семантический тег, по-видимому, нарушает CSS другого элемента в темном режиме. ⇐ Html

[Anonymous]

Я написал сайт на Eleventy и хочу использовать меньше элементов . В настоящее время HTML и CSS для страницы выглядят следующим образом:

Код: Выделить всё

: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);
}
}
}

Код: Выделить всё

Pasta's Corner


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

Основная проблема заключается в теге , особенно при активации темного режима.
Текущий светлый режим:


Текущий темный режим:


Я хочу изменить тег на тег . Я делаю это, просто заменяя теги соответствующим образом и ничего больше. Вот какой результат у меня получается.

Код: Выделить всё

   :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);
}
}
}

Код: Выделить всё

Pasta's Corner


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

Светлый режим результата:


Темный режим результата:


Как видите, навигационные ссылки в темном режиме сливаются с фоном, поскольку медиа-запрос темной цветовой схемы не применяется к некоторым элементам, вложенным в тег в темном режиме (особенно к правилам a и .current-section). Я понятия не имею, что вызывает это, но ChatGPT намекнул на то, что причиной является список селекторов с запятыми и вложенные правила CSS, хотя я не смог найти на странице MDN ничего, что указывало бы на конкретную проблему. Я также пытался разделить правила, но безрезультатно. Это происходит как в Firefox 145, так и в Edge 142. Я не могу тестировать сайты в GNOME Web через WSL2 в темном режиме.

Подробнее здесь: https://stackoverflow.com/questions/798 ... r-elements