jQuery/CSS - 如何为另一个元素内的第一个出现的元素设置样式？

Question

这是我的问题。

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代码的情况下完成这个操作？

谢谢！

最好的祝福， Cris

- Cris

---

你想要jQuery（Javascript）还是CSS？ - ThiefMaster

我用jQuery得到了答案，而且运行得很好。 - Cris

Answer 1

一个CSS3的解决方案

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

- ohmusama

Answer 2

这是最好的方法：

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

- Naveed Ahmad

---

运行得非常好。谢谢大家。 - Cris

Answer 3

你也可以使用 (CSS, jQuery) 的 nth-of-type：

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

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

- manji

Answer 4

使用.first()函数（或:first选择器）代替：

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

- Alnitak

---

请参考@Naveed更简洁的答案-那个更快，尽管它们都可以工作。 - Milimetric

真的吗？我记得阅读过函数过滤器比使用基于Sizzle的选择器更快，因为它们需要较少的解析。 - Alnitak

我认为这是jQuery的官方建议，因为Sizzle是从右到左解析，而jQuery是从左到右解析。因此，Sizzle会选择每个p:first，然后将其缩小到具有父元素#content的p:first，而jQuery会首先选择#content，然后选择p，最后选择第一个。但是，在普通HTML页面中，性能可以忽略不计。 - Dan Blows

Answer 5

由于您使用了jQuery标签，这里提供一个基于jQuery的解决方案：

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

编辑：

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

- Chandu

Answer 6

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

- Vismari

Answer 7

仅使用CSS，您可以使用兄弟选择器+，如下所示：

#content h1 + p { color: yellow; }

这只会改变紧随H1后的段落。

- DaveGauer

---

请注意，这在某些浏览器中无法正常工作。特别是以I开头，以E结尾的浏览器。 - Milimetric

@Milimetric 哈，非常正确。尽管自IE 7以来它显然已经非动态工作了（http://www.quirksmode.org/css/contents.html）。 - DaveGauer

在jsFiddle中，它将所有的p标签都变成了黄色，而不仅仅是第一个。 - ExtraGravy

@D Gauer 我正在使用Chrome浏览器。我本来以为这两个应该有相同的工作方式，这很奇怪。 - ExtraGravy

@ExtraGravy 这似乎是Chrome的一个bug：http://code.google.com/p/chromium/issues/detail?id=74180 如果连Chrome都有这个问题，我会再三考虑使用兄弟选择器。 :-( - DaveGauer

Answer 8

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

- pepkin88

Answer 9

试试这个：

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

- msmafra