html - 类内第一个元素的 CSS 选择器

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元素，而不是afoo 中的第一个元素。

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

有关伪选择器以及此工作示例的更多信息，请参阅这篇文章。

Answer 2

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

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

但它要求div它是其父元素的第一个子元素。

演示

Answer 3

很简单

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