使用CSS：lang（）选择器切换div的可见性

Question

嗯，这不起作用，也许只是没有作用。我想显示一个基于浏览器语言的容器。

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

 .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

您在这里有两个问题：

更改从@Controller public class ForwardController { @RequestMapping(value = "/*", method = RequestMethod.GET) public String redirectRoot(HttpServletRequest request) { return "forward:/a/web/index.html"; } @RequestMapping(value = "/a/**/{path:[^.]*}", method = RequestMethod.GET) public String redirectClients(HttpServletRequest request) { String requestURI = request.getRequestURI(); if (requestURI.startsWith("/a/admin/")) { return "forward:/a/admin/index.html"; } return "forward:/a/web/index.html"; } } 继承的元素的显示无济于事

类选择器和lang伪类选择器之间的后代组合器意味着将仅定位从display: none元素（从第1行）中派生的元素。

这是一个简化的示例：

display: none

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

---

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

您可以使用服务器端代码来检查浏览器发送的<p lang="en">This is English</p> <p lang="fr">C'est français</p>请求标头，并根据用户的偏好提供其他文档。