Question

我想通过CSS隐藏价值id的第二个my2：

<div class="node1">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>
<div class="node2">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>

是否可以隐藏第二个my2 div？

E.g。

.node2 ? #my2 {
     display:none;
}

谢谢！

Answer 1

是的可能：

使用~，您可以选择该类的所有兄弟姐妹（ID为您的情况）。

.node2 ~ #my2{ 
  display:none; 
}

您也可以使用 + 来选择直接兄弟。

.node2 + #my2{ 
   display:none; 
 }

希望它有所帮助！

Answer 2

为了在.node2之后定位＃my2元素，你需要在它们之间添加一个+号。

.node2 + #my2 {
  display: none;
}

但如前所述，使用多个id是无效的标记。

Answer 3

这会隐藏#my2

之后的.node2

.node2 + #my2{
  display:none;
}

注意：不要对多个元素使用相同的ID

Answer 4

将每个print button链接到每个id show IE：id指向#button1的链接。使用CSS中的#show1选择器进行关联。然后在~和display之间切换none。

Demo

<强> HTML

block

CSS使用<a id="button1">Button 1</a> <a id="button2">Button 2</a> <a id="button3">Button 3</a> <div class="text"> <div class="hidden text" id="show1">This is 1</div> <div class="hidden text" id="show2">This is 2</div> <div class="hidden text" id="show3">This is 3</div> </div>选择器引用每个~

<强> CSS

id

注意：如果您愿意，可以使用.hidden { display: none; } #button1:hover ~ .text #show1 { display: block; } #button2:hover ~ .text #show2{ display: block; } #button3:hover ~ .text #show3{ display: block } .text { position: relative; top: 10px; }代替<div>按钮。

CSS显示/隐藏下一个元素

4 个答案: