gpt4 book ai didi

html - 有没有办法用css3显示隐藏元素(非相邻元素)

转载 作者:太空宇宙 更新时间:2023-11-04 03:14:39 26 4
gpt4 key购买 nike

我需要制作一种假导航,在单击列表元素时显示不同的部分...但不允许使用 javascript。

我做了这个方法

    <style type="text/css">
body {
display: block;
}

#closquer {
display: inline-block;
}

:nth-child(1):focus ~ #lotext {
display: block;
}

#lotext {
display: none
}
</style>
</head>

<body>
<ul id="closquer">
<li class="span3" tabindex="0">Section 1</li>
</ul>
<div id="lotext">Text Section 1</div>

这行不通,因为元素不相邻 see demo

顺便说一句,如果元素是相邻的..它有效

<style type="text/css">
body {
display: block;
}

#closquer {
display: inline-block;
}

:nth-child(1):focus ~ #lotext {
display: block;
}

#lotext {
display: none
}
</style>
</head>

<body>
<ul id="closquer">
<li class="span3" tabindex="0">Section 1</li>
<p id="lotext">Text Section 1</p>
</ul>

See other demo

有没有办法用 css3 显示/隐藏非相邻元素?

最佳答案

你可以像下面这样使用强大的target:

section:not(:target) > a {
background-color: #ccc;
}
section:target > a {
background-color: white;
border-bottom-color: #fff;
}
section:not(:target) > div { z-index: -2; }
section:target > div { z-index: -1; }

这是我为你做的一个例子:

Live DEMO

关于html - 有没有办法用css3显示隐藏元素(非相邻元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28914259/

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