html - 选择第一个

Question

我有以下代码：

<div class="wrapper">
    <div class="location info">
        <h3>Location</h3>
        <h3>should be no stlye</h3>
    </div>
    <div class="skills info">
        <h3>Skills</h3>
        <h3>should be no stlye</h3>
    </div>
</div>

我正在尝试h3在信息类之后设置第一个元素的样式。我认为这应该可行，但它没有：

.info:first-child {
    color: color: rgb(200,50,50);
}

为什么这不起作用？我应该如何设置 . 信息而不在 html 中添加额外的标记？

Answer 1

你不远了，试试这个：

.info > h3:first-child {
    color: rgb(200,50,50);
}

但我相信最好的方法是在第一个 h3 中添加一个有意义的类，而不是使用这样的东西——这将使将来阅读 CSS 和标记更加容易，并且可以防止编辑标记时出现意外行为。例如：

.info-title {
    /* your styles here */
}

Answer 2

你需要一个空间：

.info :first-child

first-child伪元素描述元素本身，而不是元素的子元素。因此，如果没有空格，您将选择具有一类信息的元素，这些信息是其父级的第一个子级。

空格指定您正在寻找 的后代.info。由于您只是在寻找直接子元素，因此您应该使用子组合器 - >，并且可能还只指定 h3 元素：

.info > h3:first-child

编辑：我只注意到选择器的问题。正如其他答案（+1 to user1479606）中提到的，您的样式定义中也有一个错字：color: color: ...应该是color: ...。

Answer 3

你的css不正确，你只需要指定color一次。您还需要对选择器进行更细微的更改：

.info > h3:first-child {
    color: rgb(200,50,50);
}

演示：http: //jsfiddle.net/WSZcS/

Answer 4

我正在尝试在信息类之后设置第一个 h3 元素的样式。

.info > h3 {
    color: rgb(200,50,50);
}

Answer 5

如果您的 h3 标签不是您可以使用的第一个子元素

.info > h3:first-of-type {
    color: rgb(200,50,50);
}