鏈接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> 

在此示例中，我希望最后一段沒有邊框。 當您單擊“ 切換顯示”時，它會在最后一個段落中添加或刪除“ 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>