匹配整個文檔中的第一個元素？

我想匹配整個文檔中的第一個H1元素。但是，現在我面臨着一個問題。匹配整個文檔中的第一個元素？

我用下面的CSS選擇器：

h1:first-child { 
... 
}

然而，在頁面上匹配多個H1標籤。我怎樣才能讓它只匹配第一個？

優雅的替代品，你能告訴你的HTML？ http://jsfiddle.net/演示也將有所幫助。最可能的答案是'#containingElement> h1：first-child'。 – thirtydot 2012-02-24 23:07:52

在Chrome http://jsfiddle.net/C2r2R/中適合我。如果你沒有父div，可以試試'body> h1：first-child {}。 – ngen 2012-02-24 23:09:57

@ngen但是如果你在其他'div'內嵌套'h1'，它們也將被認爲是這種'div's的'first-child'，並且css規則將會應用於它們。 – JFK 2012-02-24 23:30:02

你可以用jQuery作弊嗎？某些時候的jQuery（JavaScript的）提供（S）超越了HTML和CSS的侷限性

$(document).ready(function() { 
$('body').find('h1:first').css('color','#0000ff'); 
}); // ready

2012-02-24 23:26:31 JFK

我不明白爲什麼這次被拒絕了一次。它最終成爲我的解決方案。謝謝一堆。 – 2012-02-25 00:22:08

@Mathias：可能是因爲這個問題沒有要求提供jQuery解決方案，儘管解決方案是完全有效的。 – animuson 2012-02-25 00:22:48

我提供了這個替代解決方案，因爲它似乎並不存在「僅css」可能的解決方案（除非有人證明我錯了）。最後，這裏最重要的是幫助不管贊成票還是不贊成票。我很高興它爲你工作。謝謝。 – JFK 2012-02-25 00:33:18

這是因爲選擇器現在查看整個文檔，它會查看父代。任何時候<h1>都是任何元素的第一個子元素，它將與該選擇器匹配。如果您只希望將其應用於文檔中的一個單獨的<h1>，考慮給它一個單獨的類或ID，或者根據您希望顯示的位置更具體地選擇它。

例如，在我的地盤我文本的每個塊分隔成<div class="box">這些都是存在於文檔的<body>。所以，如果我想只有文件在比賽第<h1>，我可以做這樣的事情：

body > .box:first-child > h1:first-of-type { }

這將只選擇第一個框，然後在該框中匹配第一個<h1>，模擬「文檔中的第一個<h1>」效果（假設第一個框中有一個<h1>，如果存在的話，在我的網站上它總是爲真）。我假設你想在這裏使用:first-of-type選擇器，因爲文檔中的第一個<h1>不一定必須是父代的第一個孩子。

2012-02-24 23:09:53 animuson

你的選擇器比需要的更加複雜。看到我的答案。 – ScottS 2012-02-25 00:14:03

根據你無可爭議的證據刪除了我的答案。 – ScottS 2012-02-25 00:24:52

沒有這樣的選擇器; all available selectors只能匹配兄弟姐妹，而不是多個父母同名的元素的順序。無論如何，你的選擇器會非常脆弱。

相反，只需將第一個h1標記爲適當的類，或者匹配其結構即可。例如，您可能想要匹配

body>header:first-child>h1

。

2012-02-24 23:10:23 phihag

不需要額外的課程，請參閱我的答案。 – ScottS 2012-02-25 00:13:03

請參閱我的評論以回答爲什麼你的答案是[錯誤]（http://jsfiddle.net/PwSVN/）;） – phihag 2012-02-25 00:19:46

我刪除了我的答案，根據你無可爭議的證據。 – ScottS 2012-02-25 00:25:25

這將匹配每個h1，它是其直接父項的第一個孩子。所以如果你有像

<div> 
    <h1></h1> 
</div> 
<div> 
    <h1></h1> 
</div>

這兩個h1標籤都是第一個孩子。

試試h1：第一個

2012-02-24 23:11:04

等一下，它沒有完成這項工作。 – 2012-02-24 23:31:28

'h1：first'是什麼？ '：first'不是CSS選擇器... – animuson 2012-02-24 23:36:59

..它是[jQuery選擇器]（http://api.jquery.com/first-selector/）。 – thirtydot 2012-02-24 23:38:18

回答