如何用nth-child排除CSS选择器中的类？

Question

我希望使用 :nth-child(n+10) 更改第9行之后元素的背景颜色，绕过一些已隐藏display: none的元素。

我正在使用.item:not(.hidden):nth-child(n+10)选择器，但它无效。当我用作示例.item:not(.hidden):hover选择器时，它正在工作。

此示例代码：

＆＃13;

＆＃13;

/********** just for ex. **********/
body {
  background-color: #333;
}
.item {
  height: 20px;
  width: 80%;
  background-color: #aaa;
  margin-bottom: 10px;
  color: #fff;
  padding-left: 20px;
}
/********** just for ex. **********/


.hidden {
  display: none;
}

.item:not(.hidden):hover {
  background-color: #00f;
}

.item:not(.hidden):nth-child(n+10) {
  background-color: #f00;
}

＆＃13;

<ol>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item hidden">3</li>
  <li class="item">4</li>
  <li class="item hidden">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
  <li class="item hidden">8</li>
  <li class="item">9</li>
  <li class="item">10</li>
  <li class="item hidden">11</li>
  <li class="item">12</li>
  <li class="item hidden">13</li>
  <li class="item">14</li>
  <li class="item">15</li>
  <li class="item">16</li>
  <li class="item">17</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

我想要：

为什么:nth-child(n+10)不影响:hover这样的整个选择？我该如何解决？

JS Bin：http://jsbin.com/qahaxihoja/edit?html,css,output