CSS隐藏一些带有类和标识的文本

Question

嗨我正在尝试使用CSS创建网站，并且想知道是否可以根据语言隐藏文本。我们使用asp网站，语言为英文和法文。为了简单起见将会记录常见问题解答，我有义务执行html（无模板和数据库）。我想做一个CSS代码，它检查languageCode是“EN”还是“FR”，并在未选择语言的位置放置不可见标签。我可以通过Javascript来改变CSS，但是因为我使用CSS来隐藏和显示我的问题，我想知道如果我只用CSS就可以做到。 这里的模板是什么，wher的信息，我想和一个样品，我想后：

<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; 
} 

下面部分的一小部分应用的CSS我想这样做，但我不能说如何使它工作

#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>