使用 CSS: lang() 选择器切换 div 可见性

Question

好吧，它不起作用，也许它只是不起作用。我想显示一个基于浏览器语言的容器。

所有 div 的初始设置都消失了。 我试过使用 属性 显示：none，以及可见性：隐藏，但无济于事。语言选择器不会覆盖初始设置。

 .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。我想要一个精益解决方案。

Answer 1

你这里有两个问题：

更改从 display: none 派生的元素的显示不执行任何操作

class 选择器和 lang pseudo-class 选择器之间的后代组合符意味着只有 display: none（从第 1 行）元素的后代元素才会被定位。

这是一个简化的例子：

div {
  display: none;
}

div span {
  display: flex
}

<div><span>...</span></div>

因为 div 是 display: none，所以 span 是什么并不重要。它不会显示，因为它在 div.

中

---

:lang: pseudo-class 并不像您想象的那样

表示元素的编写语言，与浏览器的配置无关（即与浏览器的语言无关UI 与用户的语言偏好无关）。

:lang(en) { background: pink; }
:lang(fr) { background: yellow; }

<p lang="en">This is English</p>
<p lang="fr">C'est français</p>

---

CSS 没有检测用户语言的机制。

您可以使用server-side代码来检查浏览器发送的Accept-Lang请求header，并根据用户的喜好提供不同的文档。