无法使用 :target 伪 class 更改 div 的显示

Question

我正在尝试使用 CSS :target 伪 class.

更改 div 的显示

这里是 fiddle，其中包含我要实现的一小部分代码：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' link 被点击时，我希望 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 {
 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>

无法使用 :target 伪 class 更改 div 的显示

Unable to change the display of a div using the :target pseudo class

javascript

css

pseudo-class

display