我经常使用这种格式.我希望能够用fieldset div选择第一个div：first-child {}但似乎它只被第二个子选择器抓住了.我希望“场1”是红色而不是蓝色.在语义上(至少对我来说)更有意义地说“像这样设置字段集中的第一个div”,而不是说第二个.

为什么会发生这种情况,有没有办法达到我想要的效果(能够调用div：first-child)？

如果要选择第一个div,请使用:nth-of-type(1)或:first-of-type选择器.

演示：http://jsfiddle.net/Z3Bcq/1/

如果你有,

<div>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</div>
<div>
</div>

从字面上看,我希望div：first-child选择< p> Paragraph1< / p>因为< p> Paragraph1< / p>是div的第一个子节点
但是,正如我们所知,它选择了html中的第一个div,简单地称之为更简单：首先或者可能：第一个兄弟？

#content p:first-child {color:#4C4C4C;
font-size:1.2em;
font-weight:bold;
line-height:1.8;
margin-bottom:0.5em;}


<div id="content">
 <h1>Welcome</h1>
   <p>first paragraph</p>
   <p>second paragraph</p>
   <p>third paragraph</p>
</div>

如何从css中选择第一段？

h1 + p { /* styles any paragraph that immediately follows a h1 element */ }

链接：

http://jsfiddle.net/773Xd/1/

很抱歉HTML部分的混乱,但我正在定制wordpress主题,它产生了很多类和ID.

最重要的是CSS文件的末尾.

#page-navigation ul li .sub-menu li:first-child a

(即把假类：第一个孩子放在li上,而不是a).

See it on jsfiddle.net

旧选择器不起作用,因为a始终是li元素的第一个子元素.

但是在新选择器中,li是ul元素的第一个子元素.

例如：

<div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</div>

我想选择.black的第一个孩子和最后一个孩子.那可能吗？

Live Example

.main .black:nth-child(2n) {
    color: yellow;
}

或者,如果你想让它们分开

This demo

.main .black:nth-child(5n - 6) {
    color: yellow;
}
.main .black:nth-child(5n - 4) {
    color:purple;
}

该函数使用n =元素类型计算,因此：nth-​​child(n)将选择每个元素,：nth-​​child(2n)选择所有奇数元素,：nth-​​child(2n-1)选择所有偶数元素,并且等等.你只需要提出一个能够获得你想要的元素的函数

另一个选项可能是将另一个类添加到类的第一个和/或最后一个元素

您可以通过组合两个选择器来选择具有动态数量的元素的第一个子类,如Jonathan所说(我更喜欢div：not(.black)div.black).但是,选择具有动态数量的元素的类的最后一个元素的唯一方法是没有先前的兄弟选择器是使用Javascript或类似jQuery的库,如下所示：

使用Javascript

var blackElems = document.getElementsByClassName('black');
blackElems[blackElems.length - 1].style.color = 'purple';

jQuery的

$('.main .black:last').css({ 'color' : 'purple' });