html - 用 :nth-child? 选择一半的元素

Question

以下面的代码为例:

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

是否有可能使用 :nth-child() 或其他方式来选择全部元素的 一半？代码应选择上述实例中的第一个/最后一个 两个 li，然后如果我将 li 的数量增加到六个，它将选择第一个/最后一个三个。

我觉得我将不得不使用 JavaScript...

Answer 1

您可以在纯 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 个 last 项； :nth-child(n+3) 将选择所有元素除了前 3 个。将它们结合起来，您可以根据跟随它们的内容(或父项中有多少个子项)选择纯 CSS 中的元素。如果你想让这个技巧与 150 个元素一起工作，你必须将其中的 75 个与 74 个逗号组合起来......:)

兼容性是 IE9+(存在 JS polyfill)

(*)
HTML代码第一部分:偶数个列表项；
第二部分:奇数个列表项

第一个 CSS 规则:将从 2N 项中选择最后 N 项或从 2N+1 项中选择最后 N+1/2 项并将它们设置为蓝底白字样式(例如:总共 5 或 6 项中的 3 项)。
第二个 CSS 规则:将从 2N 项中选择最后 N 项或从 2N+1 中选择最后 N-1/2 项并使用红色边框和斜体设置它们的样式(例如:总共 4 或 5 项中的 2 项)