Question

我有这个东西

<div class="foo">
  <input type="text" name="bar" value="" />
  <a href="javascript:void(0)">foobar 1</a>
</div>
<div class="foo">
  <input type="text" name="bar" value="" />
  <a href="javascript:void(0)">foobar 2</a>
</div>
<div class="foo">
  <input type="text" name="bar" value="" />
  <a href="javascript:void(0)">foobar 3</a>
</div>

<!-- I'm trying with this CSS, but with no luck -->
<style> 
.foo a:first-child {
   display:none;
}
</style>

如何才能显示foobar 2和foobar 3个链接？

Answer 1

选择器应选择第一个.foo元素，而不是foo中的第一个a元素。

.foo:first-child a{
   display:none;
}

有关伪选择器以及此this post的更多信息，请参阅working example。

Answer 2

你应该移动:first-child伪类：

.foo:first-child a {
   display:none;
}

但它要求div成为其父元素的第一个孩子。

<强> DEMO

Answer 3

这么简单

$('.foo:nth-child(3)')

类中的第一个元素的CSS选择器

3 个答案: