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

时间:2013-04-12 20:16:47

标签: html css css-selectors

我有这个东西

<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 2foobar 3个链接?

3 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:1)

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

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

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

<强> DEMO

答案 2 :(得分:-1)

这么简单

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