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。当服务＆＃39;单击链接，我希望div的显示变为＆＃39; block＆＃39;因为它被定位了。

这没有发生。我不明白为什么没有显示div？

PS：我是编程的新手，所以请忍受任何无知。

Answer 1

您的问题是#servicesNavToggleOptions元素仍然具有内联display: none（接管css块定义）。

您可以使用!important覆盖它：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法使用：target伪类

1 个答案: