Question

我有以下HTML代码：

html body .section1 #red-text p {
    color: red;
}

<html>
    <head>
        <link ref="stylesheet" href="styles.css">
    </head>
    
    <body>
        <div class="section1">
            <div id="red-text">
                <p>This text should be red.</p>
            </div>
        </div>
        
        <p>This text should be left alone.</p>
    </body>
</html>

我想使用CSS更改“此文本应为红色”文本的颜色。我尝试以下CSS代码无济于事：

html body .section1 #red-text p {
    color: red;
}

我在这里做什么错了？

Answer 1

正如上面其他人所述，代码在技术上是不错的，但是明智的是在样式设计时练习使用类而不是ID！而且，正如Mike所说，ID是唯一的，因此不需要前缀。

也就是说，您尚未标记为已解决，因此这可能是代码看起来更有效的样子。

`<html>
    <head>
        <link ref="stylesheet" href="styles.css">
    </head>

    <body>
        <div id="section1">
            <div id="inner-section">
                <p class="red-text">This text should be red.</p>
            </div>
        </div>

        <p>This text should be left alone.</p>
    </body>
</html>`

然后您可以简化CSS，因为您需要其他任何红色文本都可以是同一类！所以：

`.red-text {
    color: red;
}`

或者，如果您只想为该div中的红色文本设置样式：

`#inner-section.red-text {
    color: red;
}`

嵌套在id中的样式属性，一个类和另一个属性

1 个答案: