jQuery/CSS - 如何樣式元素的第一次出現在另一個元素內？

這是我的問題。jQuery/CSS - 如何樣式元素的第一次出現在另一個元素內？

HTML

<div id="content"> 
    <h1>Headline</h1> 
    <p>First paragraph that needs to be yellow.</p> 
    <p>Second paragraph that need not change. :) </p> 
    <p>Third paragraph that need not change. :) </p> 
</div>

如果我使用#content p:first-child {color:yellow; }這是行不通的，因爲p不是content第一個孩子... h1是第一個出生的。

如何在不觸摸HTML代碼的情況下做到這一點？

謝謝！

一切順利，克里斯

來源

2011-04-19 Cris

你想要jQuery（Javascript）還是CSS？ – ThiefMaster 2011-04-19 20:22:14

任何會做。我用jQuery得到了答案，效果很好。 – Cris 2011-04-19 20:30:14

這是最好的辦法：

$('#content p:first').css('color', 'yellow');

來源

2011-04-19 20:22:54

精美的作品。謝謝你們。 – Cris 2011-04-19 20:28:33

使用.first()功能（或:first選擇），而不是：

$('#content > p').first().css('color', 'yellow');

來源

2011-04-19 20:21:39 Alnitak

請參閱@Naveed更簡潔的答案 - 儘管他們都工作，但速度更快。 – Milimetric 2011-04-19 20:27:26

真的嗎？ ISTR讀取基於函數的過濾器比使用基於sizzle的選擇器更快，因爲它們需要較少的解析。 – Alnitak 2011-04-19 20:29:19

我認爲這是jQuery的官方建議，因爲Sizzle從右到左解析，而jQuery從左到右解析。因此，Sizzle將選擇每個「p：first」，然後將其縮小爲「＃content」的父節點的「p：first」，而jQuery將首先選擇「＃content」，然後選擇「p」，然後選擇第一個。但是，在正常的HTML頁面中，性能可以忽略不計。 – 2011-04-19 20:48:25

既然你已經使用jQuery標籤的話，基於jQuery的解決方案：

~~$（「＃content p：first-child」）。css（{color：「yellow;」}）;~~

編輯：

$("#content p:nth-child(2)").css({color:"yellow" });

來源

2011-04-19 20:22:03 Chandu

@Milimetric：查看此鏈接：http://api.jquery.com/first-child-selector/ – Chandu 2011-04-19 20:30:39

哦，很奇怪，但它不適合我的小提琴。 – Milimetric 2011-04-19 20:32:42

@Milimetric：查看編輯 – Chandu 2011-04-19 20:38:04

只需CSS，你可以使用兄弟選擇+像這樣：

#content h1 + p { color: yellow; }

這隻在H1之後立即更改段落。

來源

2011-04-19 20:23:00 DaveGauer

請注意，這在某些瀏覽器中不起作用。特別是那些以I開頭並以E – Milimetric 2011-04-19 20:25:08

@Mimeimetric Ha結尾的，非常正確。儘管IE 7（http://www.quirksmode.org/css/contents.html）顯然是非動態的。 – DaveGauer 2011-04-19 20:26:26

在[這jsFiddle]（http://jsfiddle.net/BGCQe/）它使所有的p標籤黃色不只是第一個 – ExtraGravy 2011-04-19 20:27:22

<script> 
$(function(){ 
    $('#content p:first').css('color','yellow'); 
}); 
</script>

來源

2011-04-19 20:23:48 Vismari

$('#content p').first().css({ color: 'yellow' });

來源

2011-04-19 20:24:47 pepkin88

試試這個：

$("div p:first") 
     .css("text-decoration", "underline") 
     .hover(function() { 
       $(this).addClass("sogreen"); 
      }, function() { 
       $(this).removeClass("sogreen"); 
      });

來源

2011-04-19 20:25:27 tenshimsm

你也可以使用（CSS，jQuery的）nth-of-type：

#content p:nth-of-type(1) {color:yellow; } 

$('#content p:nth-of-type(1)').css('color', 'yellow');

來源

2011-04-19 20:27:02 manji

一個CSS3的解決方案

#content > p:first-of-type { color: yellow; }

來源

2011-04-19 20:39:19 ohmusama

我剛剛用過這個，謝謝！ – Cris 2011-05-30 01:02:47

jQuery/CSS - 如何樣式元素的第一次出現在另一個元素內？

回答

相關問題