是否有 CSS 选择器用于 :nth-of-type(n+2):nth-of-type(-n+4) 的析取？

Question

假设我希望列表项的第 2、3 和 4 项为红色，其余为蓝色。我知道这样做的一种方法是

<ul class="some-list">
    <li>Here's a list item</li> 
    <li>Here's a list item</li>    
    <li>Here's a list item</li>    
    <li>Here's a list item</li> 
    <li>Here's a list item</li> 
    <li>Here's a list item</li>    
    <li>Here's a list item</li>    
    <li>Here's a list item</li>    
    <li>Here's a list item</li> 
    <li>Here's a list item</li>    
    <li>Here's a list item</li>    
    <li>Here's a list item</li>    
</ul>

ul.some-list {}
ul.some-list > li { color: blue;}
ul.some-list > li:nth-of-type(n+2):nth-of-type(-n+4) { color: red;}

Fiddle: http://jsfiddle.net/9bkfyg27/

但是，我不喜欢那个解决方案。我不认为它很优雅，因为它依赖于覆盖属性。如果我有一些与:nth-of-type(n+2):nth-of-type(-n+4)相反的东西会更好。

一般来说，我想知道是否有一种 CSS 方法可以在 [a, b] 范围内为 n 选择 nth-of-type 选择器的数学析取？即一种做法

{1, 2, 3, ... } \ {a, a + 1, ..., b}

Answer 1

可以用:not()取反

ul.some-list > li:not(:nth-of-type(n+2):nth-of-type(-n+4)) {
    color: blue;
}

问题是上面的代码不起作用，因为在选择器级别 3 中，:not() 只接受 simple selectors, but two pseudo-class selectors are a sequence of simple selectors。这可能会在选择器级别 4 中改变，很难。

要解决这个问题，请将它们分成不同的选择器：

ul.some-list > li:not(:nth-of-type(n+2)),
ul.some-list > li:not(:nth-of-type(-n+4)) {
    color: blue;
}

ul.some-list > li:not(:nth-of-type(n+2)),
ul.some-list > li:not(:nth-of-type(-n+4)) {
  color: blue;
}

<ul class="some-list">
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
</ul>

但是后来:not()就没有用了，因为下面的更简单：

ul.some-list > li:nth-of-type(-n+1),
ul.some-list > li:nth-of-type(n+5) {
  color: blue;
}

ul.some-list > li:nth-of-type(-n+1),
ul.some-list > li:nth-of-type(n+5) {
  color: blue;
}

<ul class="some-list">
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
  <li>Here's a list item</li>
</ul>

是否有 CSS 选择器用于 :nth-of-type(n+2):nth-of-type(-n+4) 的析取？

Is there a CSS selector for the disjunction of :nth-of-type(n+2):nth-of-type(-n+4)?

html

css

css-selectors