CSS 隐藏一些带有 class 和 id 的文本

Question

您好，我正在尝试用 CSS 制作一个网站，想知道是否可以根据语言隐藏文本。我们使用 asp 网站，语言为英语和法语。为了记录 FAQ 的人的简单性，我不得不做 html（没有模板和数据库）。我想做一个 CSS 代码来检查语言代码是 "EN" 还是 "FR" 并在语言不是 select 的地方放置不可见标签。我可以 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，则您只显示英文内容。注意：我知道 selector 在我的 CSS 中不起作用，但我找不到我应该使用的东西，或者如果没有 javascript.[= 就可以做我想做的事15=]

Answer 1

您可以尝试使用 :lang 选择器 css。但是，考虑到所有情况，xml lang 等，这可能会很棘手。我认为检测用户浏览器语言的 javascript 很简单，那么为什么不设置一个基于 class 的全局在那上面，然后你可以相应地用 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 的文本

CSS Hide some text with class and id

html

css

css-selectors