CSS3選擇器 - 選擇的第一個項目或項目之後

比方說，一個有以下代碼：CSS3選擇器 - 選擇的第一個項目或項目之後

<nav id="main-navigation"> 
    <ul> 
     <li><a href="#">Link 1 Level 1</a></li> 
     <li><a href="#">Link 1 Level 1</a></li> 
     <ul> 
      <li><a href="#">Link 1 Level 2</a> 
     </ul> 
    </ul> 
</nav>

現在我想設置第一ul的高度爲100px和第二ul應該是300像素。

當我嘗試

nav ul { 
    height: 100px 
}

二ul也繼承了這個值。

我正在嘗試「〜」，「+」，「>」，第一個孩子等，但不知道如何做到這一點，即使有文件。

是否有很好的解釋（最好有演示/屏幕）指南新的css3選擇器？ W3表對我來說太過於內容。

謝謝！

來源

2010-11-15 fomicz

「>」和「+」實際上是CSS 2.1選擇器。 456 Berea街有很好的解釋。 http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/和http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ – RussellUresti 2010-11-15 17:04:15

只要選擇任何ul即ul的後裔，並給它的風格，如果你只有2層<ul> s。不需要任何特殊的CSS2/CSS3組合器，因爲<ul>不能直接包含<ul>，再加上你不必擔心IE。

nav ul { 
    height: 100px; 
} 

nav ul ul { 
    height: 300px; 
}

來源

2010-11-15 16:51:51 BoltClock

要選擇元素的直接子元素而不是任何後代，應該使用>語法。你的情況（你把第二ul後li內），你需要：

nav > ul { 
    height: 100px; 
} 

nav > ul > li > ul { 
    height: 300px; 
}

~~超：它並沒有真正意義的有一個100像素的項目裏面一個300項。你爲什麼要這樣？~~

另一個額外的問題：嘗試閱讀w3c文檔，從長遠來看它會爲您節省一些時間。你不明白你總是可以問這個問題。

來源

2010-11-15 16:55:16

nav> ul> ul將不起作用，因爲標記將是nav> ul> li> ul。但是nav> ul ul會起作用。 – RussellUresti 2010-11-15 17:00:10

100px/300px只是一個例子。好吧，我會嘗試堅持w3文檔。非常感謝。 – fomicz 2010-11-15 17:03:41

我更新了答案。謝謝。 – 2010-11-15 17:03:59

首先，瀏覽器兼容性對您有多重要？你提到的所有選擇器在各種版本的IE中都有問題（IE8顯然比IE7更好，但即使IE8缺少大量的CSS選擇器）

簡單的嵌套選擇器（即只是CSS名稱之間的空格）將爲你工作 - 雖然如你所說，設置nav li {height:100px;}爲所有的LI設置它，你可以用nav li li {height:300px;}覆蓋它以設置你想要的方式。

如果你想使用'正確的'選擇器，你想要的是>。

nav>ul>li { 
    height:100px; 
}

這隻會影響外部LI元素，而不會影響內部元素。然而，正如我所說，它不會在老版本的IE中工作（幸運的是它可以在IE7和更高版本中工作，所以如果你想支持IE6，這只是一個問題）。

你說你已經找到了很難理解的各種選擇器。我建議你訪問Quirksmode。首先，它有一個非常方便的兼容性圖表，顯示哪些瀏覽器支持哪些選擇器，但它也有很好的例子說明每個選擇器的工作方式，這應該會幫助您更好地理解它們。

來源

2010-11-15 17:07:46 Spudley

CSS3選擇器 - 選擇的第一個項目或項目之後

回答

相關問題