纯 css 无法真正“切换”语言，因为 class 切换需用户交互触发，而 `` 或 `` 的状态变更必须依赖 javascript；css 只能基于已存在的 body 类（如 `class="en"` 或 `class="it"`）条件性显示/隐藏对应 `lang` 属性的内容。

在 Web 开发中，常有人希望实现“零 JavaScript”的多语言界面，但需明确一个关键前提：CSS 是声明式、静态的样式语言，不具备响应用户点击并动态修改 DOM 状态的能力。这意味着：你无法仅靠 CSS 实现「点击按钮 → 页面语言实时切换」的效果。不过，CSS 可以完美配合预设的 HTML 结构，实现基于当前

✅ 正确的纯 CSS 语言控制方式如下：

/* 当 body 拥有 'en' 类时，隐藏所有 lang="it" 的元素 */
body.en [lang='it'] {
  display: none;
}

/* 当 body 拥有 'it' 类时，隐藏所有 lang="en" 的元素 */
body.it [lang='en'] {
  display: none;
}

注意选择器应使用 [lang='en']（属性选择器），而非 :lang(en)。因为 :lang() 是基于文档语言继承和 xml:lang/lang 属性的语义匹配，行为更复杂且对动态 class 切换不敏感；而 [lang='en'] 直接精确匹配显式声明的 lang 属性，可控性更强、兼容性更好。

对应的 HTML 结构示例（无 JS）：

  
  
  


 
  

  
Welcome to our site!
  
Benvenuti sul nostro sito!

  
This is the English version.
  
Questa è la versione italiana.

? 关键说明与注意事项：

• 真正的“纯 CSS 切换”不存在：php.cn/link/c629a1a0a891379024ac1a4e971baec1"> 是通过服务端重载整个页面（如 PHP/Nginx 根据 URL 参数设置 body class），或借助 （不推荐）实现跳转；浏览器端无法避免页面刷新。
• 属于 JavaScript 行为，不符合“pure CSS”要求，应从方案中排除。
• 若坚持单页无刷新体验，必须引入 JavaScript（哪怕只有一行 body.classList.toggle()），此时已不属于纯 CSS 方案。
• 推荐渐进增强策略：服务端渲染默认语言（如根据 Accept-Language 头），前端用 JS 增强切换体验，并通过 prefers-reduced-motion 或 @media (prefers-color-scheme) 等 CSS 媒体查询保持样式层的纯粹性。

总结：纯 CSS 可以优雅地 控制语言内容的可见性，但无法独立完成 语言状态的交互式切换。理解这一边界，有助于你合理设计技术栈——将结构（HTML）、表现（CSS）与行为（JS）各司其职，才是现代 Web 开发的最佳实践。