無法使用：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。當點擊'服務'鏈接時，我預計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