gpt4 book ai didi

html - 如果分区 :target change css of another div

转载 作者:可可西里 更新时间:2023-11-01 13:13:29 27 4
gpt4 key购买 nike

我正在尝试构建响应式移动优先导航,尝试自学渐进增强。

我想要做的是通过单击菜单图标来定位我的#header,从而将我的#menu 设置为高度 100%。基本上让它在单击图标时显示。

我尝试了以下方法:

#header:target #menu {
height:100%;
}

至于没有工作。如果#header 是有针对性的,有人对如何更改#menu 高度有任何建议吗?

jsFiddle

编辑:由于我使用渐进式增强功能构建此导航,因此我不想使用任何 Jquery 或 JavaScript。关键是在添加下一级 UX 之前使其与所有设备兼容。所以它需要在没有 jQuery/JavaScript 的情况下工作

<body id="home">

<div class="wrapper">

<header id="header">

<h1 class="logo"><a href="">Nav</a></h1>
<a href="#header"> <div id="nav_btn"> </div> </a>

</header>

<nav id="primary_nav">

<ul id="menu">
<li><a href="">Portfolio</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Nonsense</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>

</nav><!--end primary_nav-->

</div><!--end wrapper-->

</body>

最佳答案

#menu 不是 #header后代,因此您不能简单地使用后代选择器。

它是 #header

的下一个兄弟的 child
header#header:target + nav#primary_nav > ul#menu { }

关于html - 如果分区 :target change css of another div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15566655/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com