CSS 中没有选择一个直观语义化的子元素区间的选择器,新增类似 `:nth-child-range()`的选择器选择一个子元素区间。 ``` html <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: ``` css li:nth-child-range(3, 6){ color: red; } li:nth-of-type-range(8, 9){ color: blue; } ``` output: ``` css 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)`? ## Sass - https://github.com/W3cplus/Sass-Resources/blob/master/mixins/_quantity-queries.scss - http://alistapart.com/article/quantity-queries-for-css
CSS 中没有选择一个直观语义化的子元素区间的选择器,新增类似
:nth-child-range()的选择器选择一个子元素区间。input:
output:
第3到第6个 li 将变成红色,
第8到第9个 li 将变成蓝色。
注意:Safari 8 之前有 bug
@Justineo 你觉得或者叫
:range-child()和:range-of-type()怎么样?还有如果是
li:nth-child(n+2):nth-child(-n+9):nth-child(odd)这样的选择器,缩写用什么语法比较合适?:range-child(2,9,odd)?Sass