：target疑似クラスを使用してdivの表示を変更できません

Question

CSS ：target疑似クラスを使用してdivの表示を変更しようとしています。ここで

は私が実装しようとしているコードの小さな部分とフィドルです：https://jsfiddle.net/Lparay7r/

HTML

<div id="navbarContent" class="navbarContent"> 
      <ul> 
       <li><a href="#doodles" id="navbarHome">Home</a></li> 
       <li><a href="../about/">About</a></li> 
       <li><a href="#servicesNavToggleOptions" class="servicesNavToggleLink">Services</a></li> 
       <div id="servicesNavToggleOptions"> 
        <li><a href="../doodle_art/">Doodle Art</a></li> 
        <li><a href="../illustrations/">Illustrations</a></li> 
        <li><a href="../paintings/">Paintings</a></li> 
        <li><a href="../graphic_design/">Graphic Design</a></li> 
       </div> 
       <li><a href="#">Products</a></li> 
       <li><a href="../contact/">Contact</a></li> 
      </ul> 
</div> 

CSS

div.navbarContent ul div#servicesNavToggleOptions:not(:target) { 
display: none; 
} 

div.navbarContent ul div#servicesNavToggleOptions:target { 
display: block; 
} 

JavaScriptの

var div = document.getElementById('servicesNavToggleOptions'); 
div.style.display = "none"; 

したがって、JavaScriptでは、divの表示がnoneに設定されています。 'services'リンクをクリックすると、divの表示がターゲットになっているので 'block'になると思います。

これは起こりません。私はdivが表示されない理由を理解していないのですか？

PS：私はプログラミング時に新しくなっていますので、ご了承ください。

Answer 1

あなたの問題は、#servicesNavToggleOptions要素がまだインラインdisplay: none（ブロック定義をcss）以上引き継いでいることです。

あなたはそれを無効にするために、この!importantを使用することができます。

div.navbarContent ul div#servicesNavToggleOptions:target { 
    display: block !important; 
} 

https://jsfiddle.net/dekelb/fL17y3g9/

var div = document.getElementById('servicesNavToggleOptions'); 
 
div.style.display = "none";

div.navbarContent ul div#servicesNavToggleOptions:not(:target) { 
 
    display: none; 
 
} 
 
div.navbarContent ul div#servicesNavToggleOptions:target { 
 
\t display: block !important; 
 
}

<div id="navbarContent" class="navbarContent"> 
 
    <ul> 
 
    <li><a href="#doodles" id="navbarHome">Home</a></li> 
 
    <li><a href="../about/">About</a></li> 
 
    <li><a href="#servicesNavToggleOptions" class="servicesNavToggleLink">Services</a></li> 
 
    <div id="servicesNavToggleOptions"> 
 
     <li><a href="../doodle_art/">Doodle Art</a></li> 
 
     <li><a href="../illustrations/">Illustrations</a></li> 
 
     <li><a href="../paintings/">Paintings</a></li> 
 
     <li><a href="../graphic_design/">Graphic Design</a></li> 
 
    </div> 
 
    <li><a href="#">Products</a></li> 
 
    <li><a href="../contact/">Contact</a></li> 
 
    </ul> 
 
</div> \t