第二个div应该使用哪种语法？

Question

<style>
.panel{
border:1px solid #000;
}
</style>

<div class="body">
    <div class="panel"></div>
    <div class="panel"></div>
</div>

我们希望为第二个border-top:0px;设置样式div.panel 第二个div.panel应该采用哪种语法？

Answer 1

您可以使用:nth-child选择器。在这种情况下，nth-child值将为2.请参阅下面的代码段：

＆＃13;

＆＃13;

.panel{
  border:1px solid #000;
}

div.panel:nth-child(2) {
  background-color: yellow;
  border-top:0px;
}

＆＃13;

<div class="body">
    <div class="panel">a</div>
    <div class="panel">b</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助!!!

Answer 2

对此最佳解决方案是最简单的解决方案，使用.panel + .panel作为选择器。这将选择另一个的任何直接.panel兄弟。

您的CSS将如下所示：

.panel {
  border: 1px solid #000;
} .panel + .panel {
  border-top: 0;
} .panel + .panel + .panel {
  border-top: 1px;
}