CSS第nth子选择器

Question

我有一个CSS选择器的问题，我有2个按钮通过外部JavaScript呈现为HTML，并且按钮位于页面底部和顶部。

所以，如果我定制具有相互类名CSS一个按钮，看起来很好，但其他没有，所以这里是我的想法：

• 选择xclassname的第一个按钮，并给它一些CSS
• 什么也不做其他按钮离开其CSS，因为它是我怎么能做到这一点

这里是我失败，CSS来做到这一点：

.xclassname:nth-child(1) { 
    ⋮ declarations 
} 

什么都没有发生，任何人都可以想到会起作用的东西？顺便说一句，我使用原型，而不是jQuery

Answer 1

这是一个CSS3选择器。你使用IE吗？因为那个选择器根本不是在那里工作的。它应该可以在Chrome，Safari或更高版本的Firefox中使用。

我将使用的解决方法是使用JQuery来执行此操作。使用JQuery中的nth-child（）选择器添加具有所需样式声明的类。 IE是如此落后于时代，这是一个无赖，但这就是为什么它是每个Web开发人员存在的祸根......

Answer 2

接受的答案是错误的。 Prototype docs实际上提供了第n个孩子的例子，OP实际上提到他使用Prototype，所以他不需要担心IE。

这是在文档中提供的第n个子例如：

$$('table tbody > tr:nth-child(even)'); 

鉴于你现在要做的，虽然你可以针对这样的元素：我使用的原型

$$('.xclassname').first().setStyle({ 
    // some style here 
});