html - CSS 使用类和 id 隐藏一些文本

Question

您好，我正在尝试用 CSS 制作一个网站，想知道是否可以根据语言隐藏文本。我们使用 asp 网站，语言是英语和法语。为了记录 FAQ 的人的简单性，我不得不做 html(没有模板和数据库)。我想做一个 CSS 代码来检查语言代码是“EN”还是“FR”，并在未选择语言的地方放置不可见的标签。我可以使用 Javascript 来更改 CSS，但是因为我使用 CSS 来隐藏和显示我的问题-答案，所以我想知道我是否可以仅使用 CSS 来做到这一点。这是模板的示例，我想要的信息以及我想在之后应用 css 的位置。:

<div>
  <div>
    <div>
      <div class="languageCode" id="fr" style="display: none; visibility: hidden;">fr</div>
    </div>
  </div>
</div>
<div class="MainContent">
  <div>
    <h1>FAQ</h1>
      <label><input type="checkbox" id="language" />Français ?</label>
      <ul class="collapse-list">
        <li class="fr">
          <label class="collapse-btn" for="question-1">
            Titre FR1
          </label>
          <input class="collapse-open" type="radio" id="question-1" name="question" aria-hidden="true" hidden="hidden"/>
          <div class="collapse-panel">
            <div class="collapse-inner">
              <p>
                texte
              </p>
            </div>
          </div>
        </li>
        <li class="en">
          <label class="collapse-btn" for="question-2">
            Title EN1
          </label>
          <input class="collapse-open" type="radio" id="question-2" name="question" aria-hidden="true" hidden="hidden"/>
          <div class="collapse-panel">
            <div class="collapse-inner">
              <p>
                text
              </p>
            </div>
          </div>
        </li>
      </ul>
  </div>
</div>

这里是CSS的一小部分

.collapse-open 
{
  display: none;
}

.collapse-panel 
{
  display: none;
  margin-left: 10px;
}

.collapse-open:checked ~ .collapse-panel 
{
  display: block;
}

这是我想做但我不能说如何让它工作的部分

#fr.languageCode ~ .fr{
  visibility: hidden;
  display: none;
}
#fr.languageCode ~ .en{
  visibility: visible;
}
#en.languageCode ~ .fr{
  visibility: visible;
}
#en.languageCode ~ .en{
  visibility: hidden;
  display: none;
}

如果 ID 是#fr，则只显示法语内容；如果 ID 是#en，则只显示英文内容。注意:我知道我的 CSS 中的选择器不起作用，但我找不到我应该使用的东西，或者如果没有 javascript 就可以做我想做的事情。

Answer 1

您可以尝试使用 :lang 选择器 css。但是，考虑到所有情况、xml lang 等，这可能会很棘手。我认为检测用户浏览器语言的 javascript 很简单，所以为什么不基于它设置一个全局类，然后你可以用 css 隐藏/显示因此。您确实需要确保拥有可能的 lang 值的完整列表。

var language = window.navigator.userLanguage || window.navigator.language;
alert(language);
document.getElementById('content').className = language;

div {
  visibility: hidden;
}
#content.fr .french {
  visibility: visible;
}
#content.en-US .english {
  visibility: visible;
}
#content.sp .spanish {
  visibility: visible;
}

<div id="content" class="default">
  <div class="french">Si votre navigateur préférence lang est francais , vous devriez voir cette
  </div>
  <div class="english">If your browser lang preference is ENGLISH you should see this
  </div>
  <div class="spanish">Si su navegador lang preferencia es espanol debería ver esto
  </div>
</div>