下面是一个例子:
<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.
:nth-child()
li
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个项目)
:nth-last-child(-n+3)
:nth-child(n+3)
ux6nzvsh2#
唯一能让接近纯CSS中的的方法是在nth-child(odd)或nth-child(even)上做一个选择器。如果你想精确地得到后半部分(而不是奇数或偶数),那么你必须使用JavaScript/jQuery。使用jQuery,你可以使用:
nth-child(odd)
nth-child(even)
var yourList = $("ul li"); yourList = yourList.slice(0, Math.floor(yourList.length/2));
字符串
ulydmbyx3#
为这些元素创建一个样式的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中看到。
Math.floor
Math.ceil
3条答案
按热度按时间yacmzcpb1#
你可以在纯CSS中选择一半的元素.
唯一的缺点是你必须知道物品总数的最大值,可能是150,但如果是151就不行了。
这里有一个演示:http://jsfiddle.net/tcK3F/(*)
最小CSS:
字符串
基于以下想法:
这个技巧来自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个项目)
ux6nzvsh2#
唯一能让接近纯CSS中的的方法是在
nth-child(odd)
或nth-child(even)
上做一个选择器。如果你想精确地得到后半部分(而不是奇数或偶数),那么你必须使用JavaScript/jQuery。使用jQuery,你可以使用:
字符串
ulydmbyx3#
Examples
为这些元素创建一个样式的CSS类:
字符串
然后,使用jQuery将该类添加到指定的元素集合中:
型
如果你确实想在奇数元素的情况下包括中间的元素,将
Math.floor
改为Math.ceil
。所有可能性都可以在examples中看到。