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?

Спасибо!

Все самое лучшее, Cris

Ответы

Ответ 1

Это лучший способ:

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

Ответ 2

a css3-решение

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

Ответ 3

вы также можете использовать (CSS, jQuery) nth-of-type:

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

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

Ответ 4

Вместо этого используйте .first() (или :first селектор):

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

Ответ 5

Поскольку вы отметили его с помощью jQuery, решение на основе jQuery:

~~$( "# content p: first-child" ). css ({color: "yellow;" });Дел >~~

EDIT:

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

Ответ 6

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

Ответ 7

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

Ответ 8

Попробуйте следующее:

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

Ответ 9

С помощью только CSS вы можете использовать селектор sibling + следующим образом:

#content h1 + p { color: yellow; }

Это изменит только параграфы сразу после H1s.