简单的第一个孩子没有按预期工作

Question

我以为我理解这一点，但显然不是。

http://jsfiddle.net/tmyie/w6nMe/2/

$('p:first-child').css({color:'red'});

不会更改任何文字的颜色。

<div class="post text"> <a href="#">this is a url</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
</div>
<div class="post text"> <a href="#">this is a url</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
</div>

Answer 1

我认为你在寻找：

$('p:first').css({color:'red'});

更新：

在<p>

上选择第一个<div>

$('div p:first-of-type').css({color:'red'});

Live Demo

Answer 2

应该是

$('p:first').css({color:'red'});

更改

p:first-child {
    background-color: orange;
}

到

p:first-of-type {
    background-color: orange;
}

Updated fiddle here.

Answer 3

尝试 :first 或 :eq(0) ，

$('p:first').css({color:'red'});

Demo和Eq demo

Answer 4

我认为您正在尝试选择每个父帖子的第一个p标签子项，这是我的解决方案：

$('div.post p:first-child').css({color:'red'})

Answer 5

尝试此代码：

$(function() {
  $("p:first").addClass("first");
});

css：p.first { color: red; }

Answer 6

在css中:first-child选择器用于选择指定的选择器，只有它是其父节点的第一个子节点。

<强> fiddle ：

<强> CSS ：

p:first-child {
    background-color: orange;
}

Answer 7

这是一种黑客行为。您可以在jquery中包含以下内容。

$('p:nth-child(2)').css({color:'red'});