Question

它看起来很简单。我想display:none;第一个button。我有两个同一个父类。出于某种原因，我无法弄清楚为什么我没有达到我想要的结果。

＆＃13;

.main-content .cbToolBar:first-child button{
  display:none;
}

＆＃13;

<div class="main-content">
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
</div>

＆＃13;

我的选择有问题，但我无法弄清楚是什么。

感谢。

Answer 1

...之前还有其他标签，但与'cbToolBar'范围处于同一级别，但我认为它会选择第一个名为'cbToolBar'的子项。

CSS的:first-child伪类选择器专门选择第一个子节点，无论它是什么类。 documentation on :first-child states：

与:nth-child(1)相同。：first-child伪类表示一个元素，它是某个其他元素的第一个子元素。

有几种解决方法。我建议的是，如果您的.cbToolBar元素是span父级中唯一的.main-content元素，则可以改为使用:first-of-type pseudo-class selector：

与:nth-of-type(1)相同。 :first-of-type伪类表示一个元素，该元素是其父元素子元素列表中其类型的第一个兄弟。

.main-content .cbToolBar:first-of-type button{
  display:none;
}

<div class="main-content">
  <p>Hello, world!</p>
  <span class="cbToolBar">
    <button class="cbButton">Button 1</button>
  </span>
  <span class="cbToolBar">
    <button class="cbButton">Button 2</button>
  </span>
</div>

或者，如果您知道要隐藏的元素的确切位置，则可以始终只使用:nth-child(n)。在此示例中，我们要隐藏的元素是第二个，因此我们使用:nth-child(2)：

.main-content .cbToolBar:nth-child(2) button{
  display:none;
}

<div class="main-content">
  <p>Hello, world!</p>
  <span class="cbToolBar">
    <button class="cbButton">Button 1</button>
  </span>
  <span class="cbToolBar">
    <button class="cbButton">Button 2</button>
  </span>
</div>

Answer 2

在这种情况下，您可以使用通用兄弟组合器。

为具有特定类别的所有元素设置规则
使用组合子选择以下兄弟姐妹并取消设置规则

＆＃13;

.cbToolBar button {
  display: none;
}
.cbToolBar ~ .cbToolBar button {
  display: inline-block;
}

＆＃13;

<div class="main-content">
  <span>span</span>
  <span class="cbToolBar">
    <button class="cbButton">button</button>
  </span>
  <span>span</span>
  <span class="cbToolBar">
    <button class="cbButton">button</button>
  </span>
  <span>span</span>
</div>

＆＃13;

CSS选择第一个按钮，第二个按钮具有相同的类

2 个答案: