Question

我有一个父div，里面有3个div。我想隐藏最后一个孩子div。我尝试使用last-child CSS选择器，但它无效。

div的顺序：

<div class="wysibb-toolbar">
    <div class="wysibb-toolbar-container"></div>
    <div class="wysibb-toolbar-container"></div>
    <div class="wysibb-toolbar-container">//(This is to be made display:none)
        <div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
        <div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
    </div>
</div>

我试过这个：

div.wysibb-toolbar div:last-child {
    display:none;
}

Answer 1

试试这个

div.wysibb-toolbar>div:last-child {
    display:none;
}

或只是

div.wysibb-toolbar-container:last-child{
 display:none;
}

或更多通用

div.wysibb-toolbar>div.wysibb-toolbar-container:last-child{
 display:none;
}

Answer 2

您的问题是您错误输入了单词display并拼写了disply

试试这个

div.wysibb-toolbar div:last-child {
  display: none;
}

<div class="wysibb-toolbar">
  <div class="wysibb-toolbar-container">Test 1</div>
  <div class="wysibb-toolbar-container">Test 2</div>
  <div class="wysibb-toolbar-container">Test 3 (should be hidden)</div>
</div>

Answer 3

：last-child选择器匹配其父级的最后一个子元素的每个元素。试试这个JSFIddle

 .wysibb-toolbar-container:last-child {
    display:none; 
  }

div中的最后一个子选择器

3 个答案: