链接 CSS 伪选择器

Question

我正在尝试使用 :last-child 以不同的方式设置最后一个元素的样式，但我无法修改它以便只计算可见元素。

$(document).ready(function() {
  $(document).on("click", "button", function() {
    $("p:last-child").toggleClass("display-none");
  });
});

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

p:last-child {
  border: none;
}

.display-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p>Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>

在这个例子中，我希望最后一段没有边框。当您单击 Toggle Display 时，它会在最后一段添加或删除类 display-none。当最后一段被隐藏时，我希望它前面的段落获得它应该具有的样式，如果它是可见的。

我尝试了以下方法，但都没有成功：

• p:last-child:not(.display-none)
• p:not(.display-none):last-child

那么，我如何链接两个伪选择器，以便实现我想要发生的事情？

Answer 1

你不能。 :last-child 是最后一个孩子，无论它是否可见。没有last-child-of-class（或它的倒数）。更重要的是，没有办法根据后面兄弟的类来设置元素的样式。

改变你的方法。使用另一个类隐藏和显示边框，并使用 JS 在倒数第二个孩子上切换它。

$(document).on("click", "button", function() {
  $("p:last-child").toggleClass("display-none").prev().toggleClass("no-border");
});

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

.no-border {
  border: none;
}

.display-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p class="no-border">Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none no-border'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>