Question

这就是问题：

我正在codecademy.com上完成一项任务，如下所示：

在CSS标签上：

将第二段设置为font-family Tahoma。
将第三段设置为＃CC0000颜色。
将第四段设置为背景色＃00FF00。
将第五个段落设置为字体大小为22px。

这是我的HTML代码：

<body>
    <div>
        <p>I'm the first child!</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>           
    </div>
</body>

这是我的css代码：

p:first-child {
    font-family: cursive;
}

p:second-child {
    font-family: Tahoma;
}

p:third-child {
    color: #CC0000;
}

p:fourth-child {
    background-color: #00FF00;
}

p:fifth-child {
    font-size: 22px
}

为什么只有第一个伪类在第一个段落上工作，而在其他段落上没有其他伪类？

请随时帮我解决这个问题。

谢谢，来自荷兰的问候！

Answer 1

这个css伪类并不存在。唯一存在的是第一个孩子。

Pseudo-Classes：

对于您的示例，正确的方法是使用:nth-child。

p:first-child {
    font-family: cursive;
}
p:nth-child(2) {
    font-family: Tahoma;
}
p:nth-child(3) {
    color: #CC0000;
}
p:nth-child(4) {
    background-color: #00FF00;
}
p:nth-child(5) {
    font-size: 22px
}

fiddle

Answer 2

这是因为只有代码中的:first-child确实存在，您应该使用CSS :nth-child(n)选择器来选择其他元素：

:nth-child(n)选择器匹配其父元素的第n个子元素，无论其类型如何。

JSFiddle - DEMO

<强> HTML：

<body>
    <div>
        <p>I'm the first child!</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
        <p>We're not.</p>
    </div>
</body>

<强> CSS：

p:first-child {
    font-family: cursive;
}
p:nth-child(2) {
    font-family: Tahoma;
}
p:nth-child(3) {
    color: #CC0000;
}
p:nth-child(4) {
    background-color: #00FF00;
}
p:nth-child(5) {
    font-size: 22px
}

css中段落的伪类不起作用

2 个答案: