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

【问题标题】：CSS3 selector question for all but first select除了第一个选择之外的所有 CSS3 选择器问题
【发布时间】：2011-07-01 05:56:54
【问题描述】：

使用以下标记，我想要一个 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) 上尝试了一些变体，但似乎无法成功。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

见：http://jsfiddle.net/uDvEt/1/

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

【讨论】：

【解决方案2】：

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

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

:not(:first-child) 的替代方法是使用起始偏移量为 2 的 :nth-child()，如下所示：

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

另一种选择是使用通用兄弟组合~（IE7+ 支持）：

div.options > div ~ div > select

【讨论】：

感谢您提供的额外信息，接受了另一个答案，因为它也是正确的并且首先通过了。
如果您担心旧的 IE，我添加了第三种解决方案。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

最好的！

【讨论】：