с помощью селектора CSS: lang () для переключения видимости divs - PullRequest
Новая
       14

с помощью селектора CSS: lang () для переключения видимости divs

0 голосов
/ 19 января 2019

Ну, это не работает, может быть, просто нет. Я хочу показать контейнер на основе языка браузера.

Начальная настройка для всех элементов div исчезла. Я пытался использовать свойство display: none, а также видимость: hidden, безрезультатно. Выбор языка не отменяет первоначальную настройку. 

 .france-box, .german-box, .dutch-box, .italy-box { display: none }

 .france-box :lang(fr) { display: flex }
 .german-box :lang(de) { display: flex; }
 .dutch-box :lang(nl) { display: flex; }
 .italy-box :lang(en) { display: flex; }

Кажется, работает по-другому, если язык действителен, я могу скрывать div, но не показывать их.

Любые идеи, как это сделать, в идеале, просто css. Я хочу бережливое решение.

1 Ответ

0 голосов
/ 19 января 2019

У вас есть две проблемы здесь:

Изменение отображения элемента, произошедшего от display: none, ничего не делает

Комбинатор-потомок между селектором класса и селектором псевдокласса lang означает, что мишенью будут только те элементы, которые произошли от элементов display: none (из строки 1).

Вот упрощенный пример: 

div {
  display: none;
}

div span {
  display: flex
}
<div><span>...</span></div>

Поскольку div равен display: none, не имеет значения, что такое span. Это не будет показано, потому что это в div.

Псевдокласс :lang: не делает то, что вы думаете

Он представляет язык, на котором написан элемент . Он не имеет ничего общего с конфигурацией браузера (т. Е. Не имеет отношения к языку, на котором находится пользовательский интерфейс браузера, и не имеет ничего общего с пользователем). языковые предпочтения). 

:lang(en) { background: pink; }
:lang(fr) { background: yellow; }
<p lang="en">This is English</p>
<p lang="fr">C'est français</p>

В CSS нет механизма определения языка пользователя.

Вы можете использовать серверный код для проверки заголовка запроса Accept-Lang, отправленного браузером, и предоставить другой документ в зависимости от предпочтений пользователя.

...