CSS第n个子选择器

Question

我遇到了css选择器的问题，我有2个按钮通过外部javascript呈现为HTML，按钮位于页面底部和顶部。

因此，如果我使用共同类名自定义CSS，一个按钮看起来很好但另一个没有，所以这是我的想法：

• 选择xclassname的第一个按钮并给它一些CSS
• 对其他按钮不做任何事情，留下它的CSS，因为我该怎么做

以下是我用CSS做错的方法：

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

什么都没发生，谁能想到一些有用的东西？顺便说一句，我使用Prototype，而不是jQuery

Answer 1

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

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

Answer 2

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

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

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

考虑到你想要做什么，虽然你可以像这样定位元素：

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