使用CSS3选择一个孩子

问题描述：

我有一个简单的CSS3问题关于选择适当的子节点。使用CSS3选择一个孩子

这是当前的HTML元素结构的一个片段：

<nav> 
    <ul> 
     <li> 
      <a href="#"><div class="adminNavButton"><p>Pages</p></div></a> 
      <ul> 
       <li><a href="#">Make a new page</a></li> 
       <li><a href="#">Manage pages</a></li> 
       <li><a href="#">Delete pages</a></li> 
      </ul> 
     </li> 
and more .... </ul> </nav>

在CSS3，我想只是 <a href="#"><div class="adminNavButton"><p>Pages</p></div></a>使用

nav ul li a{ 
}

但是选择，它选择每个孩子的锚标记，包括根据<ul><li>。我必须给它一个类选择器来解决这个问题吗？即

<nav> 
    <ul> 
     <li> 
      <a class="something" href="#"><div class="adminNavButton"><p>Pages</p></div></a>

如果你知道，在所有浏览器上运行的技术，我将不胜感激，如果你能和我一起分享。

由于提前，

================================= 感谢您的评论家伙，：第一孩子和第十一孩子（1）没有从我的主项目工作，所以我创建了一个新项目并测试了这个方法。但它没有工作所以这里是HTML结构和CSS3。

<!DOCTYPE html> 

<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>asf</title> 
    <style> 
     ul li a:first-child{ 
      color: red; 
     } 
    </style> 
</head> 

<body> 
    <ul> 
     <li> 
      <a href="">asf</a> 
      <div> 
       <a href="">asf</a> 
      </div> 
     </li> 
     <li> 
      <a href="">asfd</a> 
      <div> 
       <a href="">asf</a> 
      </div> 
     </li> 
     <li> 
      <a href="">asf</a> 
      <div> 
       <a href="">asf</a> 
      </div> 
     </li> 
    </ul> 
</body> 


</html>

嗯嘿= /（PS我测试了Firefox和Chrome浏览器，但没有工作）

您可以对第一个孩子进行寻址，例如：'nav ul li a：first' –

答

可以使用first-child伪类：

nav > ul > li > a:first-child 
{ 

}

另一种选择，会做你想要什么>选择：

nav > ul > li > a 
{ 

}

以上将仅适用于Pages锚。 >是子选择器，因此元素必须是直接子元素，与使用以所有子元素为目标的空间不同。如果你有兄弟姐妹Pages那么那些兄弟姐妹也将被定位，而第一个例子不会。

jsFiddle demo

从W3C docs：

的：第一胎伪类表示是一些其他元件的第一个子元素。同样：第n个孩子（1）。

'：first-child'实际上并没有什么区别，因为每个'a'都是它的'li'的第一个孩子。这里唯一重要的是子选择器'>'。 – BoltClock

超棒的伴侣，这一个工作！ =） – Jason

@BoltClock'first-child'很重要，如果你有'Pages'的兄弟姐妹，只想选择第一个而不是所有的兄弟姐妹。正如我在第二个例子中所说的那样，如果你想瞄准兄弟姐妹，那也是可行的。 – MrCode

答

这应该做的伎俩：

nav ul li a:first-child{ 
}

您还可以使用一个班，但如果结构将保持不变（在第一个位置），上面的例子是最好的路线。

'：first'不是CSS选择器。 – BoltClock

@BoltClock谢谢，修正。 –

使用CSS3选择一个孩子

相关推荐