Question

您好我正在尝试使用CSS创建一个网站，并想知道是否可以根据语言隐藏文本。我们使用asp网站，语言是英语和法语。为了简化记录FAQ的人员，我不得不做html（没有模板和数据库）。我想做一个CSS代码，它检查languageCode是否是＆＃34; EN＆＃34;或＆＃34; FR＆＃34;并将不可见标签放在未选择语言的位置。我可以用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 selector 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>

CSS使用class和id隐藏一些文本

1 个答案: