選擇一半的元素：第n個孩子？

看看下面的代碼，例如：選擇一半的元素：第n個孩子？

<ul> 
    <li>Hello World</li> 
    <li>Hello World</li> 
    <li>Hello World</li> 
    <li>Hello World</li> 
</ul>

是否有可能，使用:nth-child()或以其他方式，來選擇總的元素恰好一半？在上面的例子中，代碼應該選擇第一個/最後一個兩個li s，那麼如果我將li s的數目增加到6，它將選擇第一個/最後一個三個。

我覺得我將不得不使用JavaScript ...

來源

2013-03-17 JoeJ

Yeah ，你必須使用JavaScript; CSS無法確定有多少個元素或用於指定數量的語法。 – 2013-03-17 22:18:32

那麼，你會選擇所有？剛剛也知道中間在哪裏？ – caramba 2013-03-17 22:19:03

@DavidThomas檢查我的答案，確定CSS中有多少元素（鏈接到Lea Verou的帖子）並指定一個數量：'：（first/last） - （of-type/child）（aN + b）'允許。除了M個第一個元素外，還有'li + li + li + li'。你不能做的事情是**算術**，並計算一個*真正的*未定義的元素數量（雖然DOM不大可能有未定義數量的元素，在*大多數情況下） – FelipeAls 2013-03-19 07:32:23

你能夠得到附近的任何地方到純CSS的唯一方法是在任nth-child(odd)或做一個選擇nth-child(even)。如果你想要完整的後半部分（而不是奇數或偶數），那麼你必須使用JavaScript/jQuery。

使用jQuery，您可以用得到它們：

var yourList = $("ul li"); 

yourList = yourList.slice(0, Math.floor(yourList.length/2));

來源

2013-03-17 22:19:11 mattytommo

Aha，正如我擔心的那樣。我試圖找出一個方程，但似乎沒有一個方程。感謝JS片段！ – JoeJ 2013-03-17 22:25:14

這是純粹的CSS可以達到一個點，請檢查我的答案;） – FelipeAls 2013-03-17 23:54:15

@FelipeAls LOL +1的努力，但這仍然是一個靜態的解決方案:)。 – mattytommo 2013-03-18 08:39:01

例子：http://jsfiddle.net/LZwBe/

這些元素創建樣式CSS類：

li.first { 
    background: red; 
}

使用jQuery添加類到前半部分元素：

$(document).ready(function() { 
    var lis = $('ul li'); 
    $(lis).each(function(i) { 
     if(i < lis.length/2) 
      $(this).addClass('first'); 
    }); 
});

來源

2013-03-17 22:22:41 MarcinJuraszek

您可以選擇pure CSS中的一半元素...直到某一點。
唯一的缺點是你必須知道總項目的最大數量。可能是150，但它會再不行用151

在這裏工作是一個演示：http://jsfiddle.net/tcK3F/（*）

最小CSS：

/* selecting half or more items. Up to 6 */ 
li:first-child:last-child, 
li:nth-child(n+2):nth-last-child(-n+2), 
li:nth-child(n+3):nth-last-child(-n+3), 
li:nth-child(n+4):nth-last-child(-n+4), 
li:nth-child(n+5):nth-last-child(-n+5), 
li:nth-child(n+6):nth-last-child(-n+6) { 
    color: white; 
    background: darkblue; 
} 

/* selecting half or less items. Up to 6 */ 
li:nth-child(n+2):last-child, 
li:nth-child(n+3):nth-last-child(-n+2), 
li:nth-child(n+4):nth-last-child(-n+3), 
li:nth-child(n+5):nth-last-child(-n+4), 
li:nth-child(n+6):nth-last-child(-n+5), 
li:nth-child(n+7):nth-last-child(-n+6){ 
    font-style: italic; 
    border: 2px solid red; 
}

基於一個想法：
訣竅是從AndréLuís在Lea Verou的帖子中看到：Styling elements based on sibling count。我將其改編爲您需要拆分的選擇。

快速的解釋：
:nth-last-child(-n+3)將選擇從父3件最後物品; :nth-child(n+3)將選擇除第一個 3個之外的所有項目。將它們結合起來，你可以根據它們後面的內容（或父母中有多少個孩子）來選擇純CSS中的元素。除非你需要將它們中的75個與74個逗號相結合，如果你想讓這個技巧與150個元素一起工作......:)

兼容性是IE9 +（JS polyfills存在）

（*）
的HTML代碼第一部分：偶數的列表項;
第二部分：奇數的列表項

第一CSS規則：將從2N項或最後N + 1從2N/2項+ 1選擇最後N和在白色樣式它們在藍色（例如：在3項共5或6）。
第二個CSS規則：將從2N項目中選擇最後N個或從2N + 1中選擇最後N-1/2個項目，並用紅色邊框和斜體（例如總共4個或5箇中的2個項目）進行樣式設計

來源

2013-03-17 23:52:45 FelipeAls

這不好，我不會推薦這樣做，但只是...哇。這是一個很好的開箱即用，可怕的黑客解決方法 – Joe 2013-12-04 14:37:43

選擇一半的元素：第n個孩子？

回答

相關問題