我有一個簡單的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' –