链接 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 时，它会在最后一段添加或删除 class display-none。当最后一段被隐藏时，我希望它之前的段落获得它在可见时应该具有的样式。

我尝试了以下但 none 有效：

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

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

Answer 1

你不能。 :last-child 是 last-child 不管它是否可见。没有 last-child-of-class（或其倒数）。更重要的是，无法根据 class 后一个兄弟所具有的元素来设置元素样式。

改变你的方法。使用另一个 class 隐藏和显示边框，并使用 JS 在倒数第二个 child.

上切换它

$(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>

链接 CSS 个伪选择器

Chaining CSS pseudo selectors

html

css

css-selectors

pseudo-class