中間孩子僞類

有沒有辦法使用CSS選擇器來獲取元素列表中的中間子元素？中間孩子僞類

我知道沒有字面:middle-child選擇器，但有沒有訴諸於Javascript的另一種方式嗎？

來源

2013-06-24 Jason

請問孩子的數量而改變？ – jackweinbender

元素的數量在頁面加載時設置，並且可能會因用戶而異。 – Jason

如果你正在使用PHP或Ruby或其他工具，你當然可以編寫一個函數來向中間元素添加一個類。 – jackweinbender

JavaScript是做這個客戶端的唯一方法。

來源

2013-06-24 22:30:40

應該有sass解決方案 – Muhammed

你試過:nth-child(#)？

取決於你想選擇哪一個，你只需要用數字替換＃。

來源

2013-06-24 03:26:22

只有在已知元素的數量開始的情況下才有效。我正在尋找一些可用於未知長度列表的東西。 – Jason

那麼，我想如果你不知道總數，這也不會有幫助，但如果你做 - 看看這個[CSS3-nth-child on SO]（http：// stackoverflow。com/questions/6692145/n-child-css-matching-2nd-5th-8-elements），這與你的問題類似。 –

如果要將樣式應用於既不是第一個孩子也不是最後一個孩子的所有元素，則可以使用:not(:first-child)，應用樣式，然後使用:last-child從最後一個元素中「取走樣式」。但是你不得不考慮在少於3個元素時會發生什麼。

來源

2014-04-16 16:29:56 mattjulian

如果你想避免重複（'採取風格離開'部分），檢查我的答案，結合兩個'不'選擇器，以捕獲所有的中間元素... :-) –

這一直工作很適合我：

*:not(:first-child):not(:last-child) { 
    ... 
}

這裏你可以看到這樣一個例子：http://codepen.io/bentomas/pen/Gwqoe

一個需要注意的情況是，它只能在IE 9：http://caniuse.com/#feat=css-sel3

來源

2014-11-06 20:08:49 bentomas

如果有三個項目，這不會有效嗎？當時我正在尋找比它更多元素的東西。 – Jason

不，這將選擇不是第一個孩子而不是最後一個孩子的所有元素。你可以在這裏看到它的動作：http://codepen.io/bentomas/pen/Gwqoe – bentomas

哦，除非你想*精確*中間的孩子（即只有一個元素應該匹配）。我以爲你想選擇所有在中間的孩子。至少這就是我期待的一個'：中孩子'僞類在我去找它並找到這個線程時所要做的。 – bentomas

雖然不夠高雅，但如果您知道元素總數的上限和下限，則可以採用暴力方法來選擇中間元素。

例如，以下規則將選擇一組5,7或9個元素中的中間元素。

div:nth-child(3):nth-last-child(3) { 
    /* The middle element in a set of 5 is the 3rd element */ 
} 

div:nth-child(4):nth-last-child(4) { 
    /* The middle element in a set of 7 is the 4th element */ 
} 

div:nth-child(5):nth-last-child(5) { 
    /* The middle element in a set of 9 is the 5th element */ 
}

或用無禮的話：

@for $i from 3 through 5 { 
    div:nth-child(#{$i}):nth-last-child(#{$i}) { 
     /* The middle element */ 
    } 
}

來源

2015-07-13 19:26:34

如果可以有偶數個元素，則可以包括'div：nth-child（-1 +＃{$ i}）：nth-last-child（＃{$ i}）'和/或' div：nth-child（＃{$ i}）：nth-last-child（-1 +＃{$ i}）'分別選擇剛好在中心左側或右側的元素。 – Blazemonger

您可以使用「不是第一個，而不是最後一個」的辦法，就像這樣：

CSS

li:not(:first-child):not(:last-child) { 
    color:red; 
}

HTML

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul>

檢查JsFiddle

來源

2015-07-27 09:42:18

如果有5件物品會怎麼樣？ – Muhammed

這隻適用於總共有3件物品。 – RaajTram

@RaajTram你是對的，但那是個問題... –

中間孩子僞類

回答

相關問題