爲什麼我的css沒有被應用？

我有一個簡單的html文件，我想應用一些css來改變外觀，但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>

來源

2014-11-02 mitchj

'.heading'選擇一個類別爲「heading」的項目。你希望'＃標題'通過ID選擇一個項目。 – ptd 2014-11-02 13:53:21

您正在將您的樣式應用於課程而不是ID。將HTML中的ID更改爲類。

即<div class="heading">

來源

2014-11-02 13:53:03 ascorbin

謝謝！我將「id」更改爲「class」，現在可以使用。感謝大家的意見！ – mitchj 2014-11-02 17:47:51

.content p匹配

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

你所尋找的是：#content p

來源

2014-11-02 13:55:15

你的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進行造型。

來源

2014-11-02 13:55:19

爲什麼我的css沒有被應用？

回答

相關問題