使用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瀏覽器，但沒有工作）

來源

2012-12-06 Jason

您可以對第一個孩子進行尋址，例如：'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）。

來源

2012-12-06 07:25:35 MrCode

'：first-child'實際上並沒有什麼區別，因爲每個'a'都是它的'li'的第一個孩子。這裏唯一重要的是子選擇器'>'。 – BoltClock

超棒的伴侶，這一個工作！ =） – Jason

@BoltClock'first-child'很重要，如果你有'Pages'的兄弟姐妹，只想選擇第一個而不是所有的兄弟姐妹。正如我在第二個例子中所說的那樣，如果你想瞄準兄弟姐妹，那也是可行的。 – MrCode

這應該做的伎倆：

nav ul li a:first-child{ 
}

您還可以使用一個班，但如果結構將保持不變（在第一個位置），上面的例子是最好的路線。

來源

2012-12-06 07:24:36

'：first'不是CSS選擇器。 – BoltClock

@BoltClock謝謝，修正。 –

使用CSS3選擇一個孩子

回答

相關問題