選擇：不包含某些特定類別的第一個孩子或最後一個孩子

Question

假設我們有一個包含5個項目的列表，並且我們想要將一些特定樣式應用到第一個或最後一個孩子。但是這個列表的功能需要通過jQuery應用來隱藏它的一些項目（我們稱之爲.hide），它將設置目標項目上的display: none;。

的特定風格我在一開始談話應該只適用於第一和可見的最後一個項目，所以我想要做到的，是莫名其妙地跳過它應用了.hide類的那些在他們身上，並在同一時間的第一個或最後一個項目。

我已經試過通過組合一些:not(.hide)和:first-child/:last-child僞代碼來做到這一點，但它不起作用。另外，嘗試使用simbling選擇器對於第一個孩子來說最多可以工作，但是現在沒有辦法在css中選擇以前的兄弟，所以這個解決方案不會覆蓋最後一個孩子的問題。

這裏有一個jsfidle在這裏你可以更好的理解我想要做的事：

http://jsfiddle.net/3wgxt1oL/

或

HTML

<div class="hide">Item 1</div> 
<div>Item 2</div> 
<div>Item 3</div> 
<div>Item 4</div> 
<div class="hide">Item 5</div> 

CSS

.hide {display: none;} 
div:not(.hide):first-child, 
div:not(.hide):last-child {color: red;} 

Answer 1

如上所述，這對於CSS選擇器是不可行的。究其原因有二：

• :first-child和:last-child代表他們的父母的第一個和最後的孩子，期。它們不代表匹配選擇器其餘部分的第一個和最後一個子元素。鏈接:not(.hide)只是告訴選擇器忽略該元素，如果它具有.hide類;它不會改變選擇器其餘部分的含義。

• There is currently no other pseudo-class available for the first or last (or nth) element matching an arbitrary selector.

既然你已經使用jQuery應用.hide類，你可以用它來另一個類適用於匹配:not(.hide)第一個和最後一個元素，然後針對那些其他類中的CSS。

Answer 2

你的意思是這樣的嗎？

var notHidden = $('div').not('.hide'); 
notHidden.first().css('color', 'red'); 
notHidden.last().css('color', 'red'); 

Answer 3

您可以添加特定的風格，以第一個可見的孩子，像這樣：

.hide {display: none;} 
div:not(.hide){ 
    color: red; 
} 
div:not(.hide) ~ div:not(.hide){ 
    color: black; /*reset everything to normal*/ 
} 

但是沒有辦法選擇使用CSS最後一個可見子。爲此，您需要使用javascript