Question

我正在使用:target隐藏我页面中的div。除了样式仅应用于页面上的第一个div之外，它的效果很好。

我正在使用这个css

#mylist { display:block;}

#mylist:target { display:none;}

我有几个具有相同div的元素

<a href="#mylist"> go </a>

<div id="mylist"> item 1 </div >
<div id="mylist"> item 2 </div >
<div id="mylist"> item 3 </div >

我的问题只是第一个Div被隐藏了。我怎样才能遍历所有元素？

还是有另一种方法来实现这个目标吗？

Answer 1

ID是且必须是唯一的。它仅适用于一个元素。使用类

试试这个：

<div class="mylist"> item 1 </div >
<div class="mylist"> item 2 </div >
<div class="mylist"> item 3 </div >


.mylist { display:block;}

.mylist:target { display:none;}

Answer 2

您想使用target-property隐藏元素。此属性仅适用于锚点。要将元素定义为anchorpoint，您必须设置一个id。要一次隐藏多个元素，您必须将父元素声明为anchorpoint，然后您可以从中操作子元素。

请参阅此处的工作示例：

<div id="mylist">
 <div> item 1 </div>
 <div> item 2 </div>
 <div> item 3 </div>
</div>

http://jsfiddle.net/bLhv19cr/1/

<强>更新与以下评论相关：http://jsfiddle.net/bLhv19cr/3/

将CSS应用于命名div中的所有元素

2 个答案: