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>