CSS3选择器问题,除了第一个选择

使用下面的标记,我希望 CSS 选择器在每个选项 div 中选择除第一个选择菜单之外的所有选项,这个选项可能有很多个:

<div class="options">
<div class="opt1">
<select title="Please choose Warranty">
<option value="">Select Waranty</option>
<option value="1">1 year guarantee</option>
<option value="2">3 year guarantee</option>
</select>
</div>
<div class="opt2">
<select title="Please choose Color">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
</select>
</div>
<div class="opt3">
<select title="Please choose Size">
<option value="">Select Size</option>
<option value="1">Small</option>
<option value="2">Big</option>
</select>
</div>
</div>

我在 Prototype 中使用这个,它几乎完全支持 css3选择器,所以并不关心浏览器的支持。

初始选择器类似于:

div.options div select

我已经尝试了 nth-child:not(:first-child)的一些变化,但似乎不能使它工作。

94209 次浏览

See: http://jsfiddle.net/uDvEt/1/

.options > div:not(:first-child) select { background:yellow;}

You need to select the option divs instead of the selects when using :not(:first-child), because every select is the first (and only) child of its parent div:

div.options > div:not(:first-child) > select

An alternative to :not(:first-child) is to use :nth-child() with a starting offset of 2, like this:

div.options > div:nth-child(n + 2) > select

Another alternative is with the general sibling combinator ~ (which is supported by IE7+):

div.options > div ~ div > select

.options > div:nth-child(n+2) select

.options > *:not(:first-child)

the best!