使用CSS第一個孩子選擇第一個H2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
h2:first-child 
{ 
background:yellow; 
} 
</style> 
</head> 
<body> 
<div class="car"> 
    <div>Something</div> 
    <h2>I want to style this</h2> 
    <p>bla bla</p> 
    <h2>I don't want to style this</h2> 
    <p>bla bla bla</p> 
</div> 

</body> 
</html>

我有麻煩的樣式第一個h2，「我想這樣」，因爲我有一個權利之前，第一個h2我不能選擇它，但如果它不在那裏，它會起作用。沒有編輯html（並且當然沒有使用js）有沒有辦法選擇第一個h2？或者正在用像下面這樣的另一個元素包裝h2的唯一方式？使用CSS第一個孩子選擇第一個H2

<div class="car"> 
    <div>Something</div> 
<div> 
     <h2>I want to style this</h2> 
     <p>bla bla</p> 
     <h2>I don't want to style this</h2> 
     <p>bla bla bla</p> 
</div> 
</div>

來源

2011-03-30 Joker

沒有比Sapph的方法更簡單的方法使用相鄰選擇器是CSS2：

.car div + h2{}

來源

2011-03-30 08:06:05

整齊！不知道存在。 – Sapph 2011-03-30 14:21:43

@Sapph感謝您的回答，我現在將使用這種方法，因爲一些舊版本的IE不支持CSS3。第一種類型確實有一個好處，你不需要知道它之前的元素。當更多人使用IE9時，我可能會開始使用它。 – Joker 2011-03-30 17:29:51

如果你願意分支到CSS3，該first-of-type選擇正是你想要完成的任務。

下面是一個例子：http://jsfiddle.net/m3yrR/1/

first-of-type將始終選擇的元素在任何級別中首次出現。因此，對於您的情況，它會在標記樹中的任何級別設置第一個<h2>。您當然可以使用更多特定的選擇器來限制它被選中的位置。 :)

否則，是的，你必須做一些事情，如將其包裝在另一個<div>，確保它是第一個元素，然後做div > h2:first-child。或者只是h2:first-child，如果你想不太具體。

只要確保它是其父項的第一個子項（!!），並且必須具體，因爲您需要使用父子級別。

來源

2011-03-30 06:05:03 Sapph

使用CSS第一個孩子選擇第一個H2

回答

相關問題