无法使用:目标伪类更改DIV的显示

Question

我正在尝试使用CSS ：target pseudo类更改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的显示设置为无。当单击"服务"链接时，我希望DIV的显示为"块"。

这没有发生。我不明白为什么不显示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 {
	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>