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);
}

选择类定义</h3>后的第一个<h3>元素

5 个答案: