Question

我有一个简单的html文件，我想应用一些css来改变外观，但css没有应用到我的内容。

我知道我应该将css放在外部文件中，但我现在只是从书中的一个例子中学习。

这是html。有人可以帮忙吗？提前感谢你！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .content p{
        background-color:#C0C0C0;
        padding: 3px;
    }
    .heading p{
        display: inline;
        background-color:black;
        color: white;
        font-weight:bold;
        padding:3px;
    }
</style>
</head>
<body>
    <div id="heading">
        <p>Heading A</p>
        <p>Heading B</p>
        <p>Heading C</p>
    </div>
    <div id="content">
        <p>Paragraph A</p>
        <p>Paragraph B</p>
        <p>Paragraph C</p>
    </div>
</body>
</html>

Answer 1

您正在将您的风格应用于课程，而不是ID。将HTML中的ID更改为类。

即。 <div class="heading">

Answer 2

你的css应该是

# = id . = class

这

.content p{
    background-color:#C0C0C0;
    padding: 3px;
}
.heading p{
    display: inline;
    background-color:black;
    color: white;
    font-weight:bold;
    padding:3px;
}

到

#content p{
    background-color:#C0C0C0;
    padding: 3px;
}
#heading p{
    display: inline;
    background-color:black;
    color: white;
    font-weight:bold;
    padding:3px;
}

我还要补充一点，ids在页面上应该是唯一的，这意味着您不能拥有多个具有相同id的元素，因此使用{{1}几乎总是更好用于造型。

Answer 3

.content p匹配

<div class="content">
    <p>Paragraph A</p>
    <p>Paragraph B</p>
    <p>Paragraph C</p>
</div>

您要找的是：#content p

为什么我的css没有被应用？

3 个答案: