除了第一个选择之外的所有CSS3选择器问题

Question

使用以下标记我想要一个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)但似乎无法使它工作.

Answer 1

请参阅:http://jsfiddle.net/uDvEt/1/

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

Answer 2

使用时需要选择选项divs而不是selects :not(:first-child),因为每个选项select都是其父级的第一个(也是唯一的)子级div:

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

另一种方法:not(:first-child)是使用:nth-child()起始偏移量为2,如下所示:

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

另一种替代方案是使用通用兄弟组合器~(IE7 +支持):

div.options > div ~ div > select