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代码的情况下执行此操作？

谢谢！

一切顺利，克里斯

Answer 1

css3解决方案

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

Answer 2

这是最好的方式：

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

因为你已经使用jQuery，基于jQuery的解决方案标记了它：

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

编辑：

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

Answer 6

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

Answer 7

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

Answer 8

试试这个：

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

Answer 9

只使用CSS，您可以像这样使用兄弟选择器+：

#content h1 + p { color: yellow; }

这只会在H1之后立即更改段落。

jQuery / CSS - 如何在另一个元素内首次出现元素？

9 个答案: