CSS3选择器的问题,除了第一次选择


92

使用以下标记,我希望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)但似乎无法使其工作。

Answers:



48

使用时,您需要选择选项divs而不是selects :not(:first-child),因为everyselect是其父项的第一个(也是唯一的)子项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

感谢您提供额外的信息,接受了其他答案,因为它也是正确的,并且是第一个通过的。
robjmills

1
以防万一您担心较旧的IE,我添加了第三个解决方案。
BoltClock

0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.