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

Question

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

所有 div 的初始设置都消失了。 我尝试使用属性 display: none 和 visibility: 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。我想要一个精益解决方案。

Answer 1

这里有两个问题：

更改从display: none 继承的元素的显示没有任何作用

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

这是一个简化的例子：

div {
  display: none;
}

div span {
  display: flex
}

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

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

---

:lang: 伪类并没有像你想象的那样做

它代表元素所用的语言。它与浏览器的配置无关（即与浏览器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 没有检测用户语言的机制。

您可以使用服务器端代码检查浏览器发送的Accept-Lang 请求标头，并根据用户的偏好提供不同的文档。