Question

我在stackoverflow上找到了纯css转换的解决方案。 Here.

在CSS中我有：

.en, .sl { display:none; } /* hide all elements with a language class */
.en:lang(en), .sl:lang(sl) { display:block; } /* show those elements that match their language class */

在HTML中：

<html lang="sl">

和

<div class="sl">Pozdravljeni</div>
<div class="en">Hello</div>

要更改lang属性，我使用js：

function setLang(lang) {
    document.getElementsByTagName('html')[0].setAttribute('lang',lang);                 
}

在我的Chrome计算机上运行正常。它适用于我的iPhone。在ipad mini上。但它不适用于Chrome中我的女朋友电脑。而不是IE。

似乎它在IE上的计算机上不起作用。

问题出在CSS中。这段代码：

.en, .sl { display:none; }

有效，而不是：

.en:lang(en), .sl:lang(sl) { display:block; }

我无法弄清楚出了什么问题。

Answer 1

您定位<div>上的课程＆＃34; de＆＃34;在.de:lang(sl)中，但您没有<div>个班级＆＃34; de＆＃34;。

因此，如果您将.de:lang(sl)更改为.sl:lang(sl)，它应该有效。

Answer 2

“。en”和“.de”指的是类名，“：lang（en）”和“：lang（sl）”指的是lang属性。

.en:lang(en), .de:lang(sl) { display:block; }

表示“为类别为'en'和lang ='en'的任何项启用块显示，以及任何类'de'和lang ='sl'”的项目

Answer 3

html[lang="en"] .de,
html[lang="en"] .sl {
    display: none;
}

html[lang="de"] .en,
html[lang="de"] .sl {
    display: none;
}

html[lang="sl"] .de,
html[lang="sl"] .en {
    display: none;
}

Answer 4

我使用setLang时出错了。缺少''......

错误：

<body onload="setLang(<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>);">

右：

<body onload="setLang('<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>');">

Tnx，Rick Hitchcock，你的评论给了我一个提示。

纯CSS网站翻译

4 个答案: