Add support :nth-child-range() selectors
yisibl opened this issue · comments
CSS 中没有选择一个直观语义化的子元素区间的选择器，新增类似 :nth-child-range()的选择器选择一个子元素区间。
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
<li>Child 5</li>
<li>Child 6</li>
<li>Child 7</li>
<li>Child 8</li>
<li>Child 9</li>
<li>Child 10</li>
</ul>input:
li:nth-child-range(3, 6){
color: red;
}
li:nth-of-type-range(8, 9){
color: blue;
}output:
li:nth-child(n+3):nth-child(-n+6){
color: red;
}
li:nth-of-type(n+8):nth-of-type(-n+9) {
color: blue;
}第3到第6个 li 将变成红色,
第8到第9个 li 将变成蓝色。
注意：Safari 8 之前有 bug
- https://bugs.webkit.org/show_bug.cgi?id=137032
- http://stackoverflow.com/questions/26032513/ios8-safari-after-a-pushstate-the-nth-child-selectors-not-works
@Justineo 你觉得或者叫 :range-child() 和 :range-of-type() 怎么样？
还有如果是 li:nth-child(n+2):nth-child(-n+9):nth-child(odd) 这样的选择器，缩写用什么语法比较合适？
:range-child(2,9,odd)?