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 - 如何样式元素的第一次出现在另一个元素内？

回答

相关问题