显示情况下最后一个元素的 CSS 选择器：none 不起作用

Question

需要在以下元素中应用样式：

 <div id="box" class="abc">Hello, World!11212</div>

当我将

display:none

放在第一个元素上时它可以工作，但当它放在最后一个元素上时它不起作用

div {
  width: 200px;
  height: 125px;
  padding: 10px;
  background-color: red;
  border: 1px solid black;
}

#box {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -moz-transform: rotate(30deg);
  /* Firefox */
  -webkit-transform: rotate(30deg);
  /* Safari and Chrome */
  -o-transform: rotate(30deg);
  /* Opera */
  background-color: yellow;
}

.abc:not([style="display:none"]):last-child {
  font-size: 100px;
}

<div>
  <div id="box" class="abc">Hello, World!</div>
  <div id="box" class="abc">Hello, World!11212</div>
  <div class="abc" style="display:none">Real Time CSS Editor</div>
</div>

Answer 1

:last-child

表示其包含元素中的最后一个子元素。它确实not意味着在与选择器的其余部分匹配的元素组中的最后一个。

.abc:not([style="display:none"]):last-child

不匹配：

• <div id="box" class="abc">Hello, World!</div>

  因为它不是最后一个孩子

• <div id="box" class="abc">Hello, World!11212</div>

  因为它不是最后一个孩子

• <div class="abc" style="display:none">Real Time CSS Editor</div>

  因为它有

  style="display:none"

有 no 选择器，这意味着 元素组中的最后一个与选择器的其余部分匹配。

---

考虑以编程方式向您想要定位的元素添加一个类，然后选择它。