為什么我的CSS沒有被應用？

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更改為class。

即<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元素，因此使用classes進行樣式設計總是更好。

Answer 3

.content p匹配

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

您正在尋找的是： #content p

為什么我的CSS沒有被應用？

問題描述

3 個解決方案

解決方案1
3 已采納 2014-11-02 13:53:03

解決方案2
3 2014-11-02 13:55:19

解決方案3
1 2014-11-02 13:55:15

為什么我的CSS沒有被應用？

問題描述

3 個解決方案

解決方案1 3 已采納 2014-11-02 13:53:03

解決方案2 3 2014-11-02 13:55:19

解決方案3 1 2014-11-02 13:55:15

解決方案1
3 已采納 2014-11-02 13:53:03

解決方案2
3 2014-11-02 13:55:19

解決方案3
1 2014-11-02 13:55:15