2

我有一些带三个孩子（一个<h1>和两个<div>）的部分

<section class="half">
  <h1>Half</h1>
  <div>
    left half
  </div>
  <div>
    right half
  </div>
</section>

然后我在这些块中添加一些样式

section > h1 { ... }
section > div { ... }

我想<div>为该部分的第一个元素指定其他样式。

我不能写 use 只是section > :first-child因为 section 中的第一个孩子是<h1>.

那我应该怎么写？

4

4 回答 4

4

这就是:nth-of-type：

section > div:nth-of-type(1) {
    /* CSS properties go here... */
}
于 2013-06-02T04:08:23.733 回答
3

您正在寻找:first-of-type

于 2013-06-02T04:12:39.503 回答
1

仅使用section > div:nth-of-type(1) {将选择div父元素所在的第一个元素section，因此我觉得这将是一个松散的选择器，通过使用使其更严格

section.half > div:nth-of-type(1) { /* This will select 1st div element inside
                                     * section having class .half
                                     */
    /* Styles goes here */
}

演示

您也可以使用first-of-type 演示

section.half > div:first-of-type {
    /* Styles goes here */
}
于 2013-06-02T04:12:57.740 回答
1

工作 jsFiddle 演示

毫无疑问，Joseph Silber的回答很棒。但如果你不想使用 CSS3，这里有窍门：

section > div { background: red; }
section > div + div { background: transparent; }

首先，选择所有div 元素并为其设置属性。然后，您选择第二个 div 和更高版本并为其重置这些属性。

于 2013-06-02T04:13:14.413 回答