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

x8goxv8g  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(135)

下面是一个例子:

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

字符串
有没有可能,使用:nth-child()或其他方式,正好选择全部元素的一半?代码应该选择上面例子中的第一个/最后 * 两个 * li s,然后如果我要将li s的数量增加到六个,它将选择第一个/最后 * 三个 *。
我觉得我得用JavaScript.

yacmzcpb

yacmzcpb1#

你可以在纯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,在莱亚·韦罗的一篇文章中看到:Styling elements based on sibling count。我根据你对分割选择的需要对它进行了修改。
快速解释:
:nth-last-child(-n+3)将选择父元素中的最后3个元素; :nth-child(n+3)将选择除前3个元素外的所有元素。合并可以根据它们后面的内容(或者父元素中有多少个子元素)选择纯CSS中的元素。如果你想让这个技巧对150个元素起作用,你必须将其中的合并用74个逗号组合起来。
兼容性为IE9+(JS polyfills存在)
(*)
HTML代码的第一部分:偶数个列表项;
第二部分:奇数个清单项目
第一个CSS规则:将从2N个项目中选择最后N个或从2N+1中选择最后N+1/2个项目,并将其样式设置为蓝色上的白色(例如:总共5或6个项目中的3个项目)。
第二个CSS规则:将从2N个项目中选择最后N个或从2N+1中选择最后N-1/2个项目,并使用红色边框和斜体对其进行样式设置(例如:总共4或5个项目中的2个项目)

ux6nzvsh

ux6nzvsh2#

唯一能让接近纯CSS中的的方法是在nth-child(odd)nth-child(even)上做一个选择器。如果你想精确地得到后半部分(而不是奇数或偶数),那么你必须使用JavaScript/jQuery。
使用jQuery,你可以使用:

var yourList = $("ul li");

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

字符串

ulydmbyx

ulydmbyx3#

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中看到。

相关问题