所有的CSS3select器的问题,但首先select

有了下面的标记,我想要一个CSSselect器来select除了每个选项div内的第一个select菜单 – 其中可能有很多:

<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中使用了它,它几乎支持css3select器,所以不需要浏览器的支持。

最初的select器是这样的:

 div.options div select 

我已经尝试了一些关于nth-child:not(:first-child)但似乎无法使其工作。

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

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

当使用:not(:first-child) ,您需要selectdiv s选项而不是select s,因为每个select都是其父div的第一个(也是唯一的)子项:

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

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

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

另一种方法是使用通用的兄弟组合器(IE7 +支持):

 div.options > div ~ div > select