Question

以下面的代码为例：

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

是否可以使用:nth-child()或其他方式精确选择一半的元素？代码应该在上面的例子中选择第一个/最后一个两个 li，然后如果我要将li的数量增加到六个，它将选择第一个/ last 三。

我觉得我将不得不使用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个项目）

Answer 2

在纯CSS中，你能够的唯一方法是在nth-child(odd)或nth-child(even)上选择一个选择器。如果你想要完全是后半部分（而不是奇数或偶数），那么你必须使用JavaScript / jQuery。

使用jQuery，您可以使用它们：

var yourList = $("ul li");

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

Answer 3

Examples

为这些元素创建一个带有样式的CSS类：

.half {
    background-color: #18D;
}

然后，使用jQuery将该类添加到指定的元素集：

$(function () {
  var $lis = $('ul li')
  var length = $lis.length

  // Add class to first half:
  $lis.slice(0, Math.floor(length / 2)).addClass('first')

  // Add class to last half:
  $lis.slice(length - Math.floor(length / 2)).addClass('first')
})

如果您想要在奇数元素的情况下包含中间的元素，请将Math.floor更改为Math.ceil。所有可能性都可以在examples中找到。

选择一半元素：nth-child？

3 个答案:

Examples

选择一半元素：nth-​​child？

3 个答案:

Examples

选择一半元素：nth-child？