不能改變特定div的背景顏色

即時通訊新的CSS，即時通訊嘗試構建一個非常簡單的網站，我的佈局已經完成，現在的問題是，當我爲divs輸入特定的背景顏色屬性B + C，B和C似乎沒有任何效果，我檢查了其他問題，我知道我應該使用溢出：隱藏;也試過了：都;但他們都沒有工作，你能指出我做錯了什麼？不能改變特定div的背景顏色

<!doctype html> 
 
<html> 
 
<style> 
 
    body { 
 
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%); 
 
    background-color: white; 
 
    background-size: 70%; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    } 
 
    
 
    #A { 
 
    overflow: hidden; 
 
    border: none; 
 
    } 
 
    
 
    object { 
 
    width: 1500px; 
 
    height: 800px; 
 
    display: inline-block; 
 
    } 
 
    
 
    #B { 
 
    background-color: #777676; 
 
    clear: both; 
 
    display: flex; 
 
    overflow: hidden; 
 
    margin-left: -10px; 
 
    border: none; 
 
    width: 600px; 
 
    border: thick; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-right: 0px; 
 
    float: left; 
 
    } 
 
    
 
    #C { 
 
    background-color: #777676; 
 
    clear: both; 
 
    display: flex; 
 
    flex: 0 1 auto; 
 
    overflow: hidden; 
 
    border: thick; 
 
    width: 1250px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-right: -10px; 
 
    } 
 
    
 
    #B+C { 
 
    background-color: #777676; 
 
    clear: both; 
 
    overflow: hidden; 
 
    border: none; 
 
    width: 1900px; 
 
    height: 1000px; 
 
    } 
 
    
 
    .webmaster { 
 
    background-color: #777676; 
 
    clear: both; 
 
    margin-left: -10px; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    height: 80px; 
 
    width: 1920px; 
 
    border: none; 
 
    font-family: Georgia; 
 
    text-align: justify; 
 
    padding: 20px 640px; 
 
    font-size: 20px; 
 
    margin-top: -5px; 
 
    } 
 
    
 
    a:link { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    } 
 
    
 
    a:visited { 
 
    text-decoration: none; 
 
    color: #4C4C4C; 
 
    } 
 
    
 
    a:hover { 
 
    text-decoration: none; 
 
    color: #B2B2B2; 
 
    } 
 
    
 
    a:active { 
 
    color: #000000; 
 
    text-decoration: underline; 
 
    } 
 
</style> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rodriguez Tullio Propiedades</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="A"> 
 
    <object type="text/html" data="A.html"> 
 
</object></div> 
 
    <div id="B+C"> 
 
    </div> 
 
    <div id="B"> 
 
    <object type="text/html" data="B.html"> 
 
</object></div> 
 
    <div id="C"> 
 
    <object type="text/html" data="C.html"> 
 
</object></div> 
 

 
    <div class="webmaster">2017 | <a href="mailto:[email protected]">[email protected]</a> |</div> 
 

 

 
</body> 
 

 
</html>

來源

2017-03-14 TEDEDFRED

甲'+'在CSS是一個[相鄰的兄弟選擇器（https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors），則不應該在你的'IDs'中使用它。 – APAD1

請參考最佳答案[here]（http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html） –

兩個問題在這裏：

不能使用B+C作爲id屬性。根據文檔：

值不能包含任何空格字符。 HTML 4：ID和名稱代幣必須以字母（[A-Za-z]）開頭，後面可以跟任意字母數字，數字（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

B+C使用特定相鄰操作員（+符號）。在CSS中，這意味着樣式定義將使用標籤C作爲DOM元素的目標，該元素緊跟在具有標籤B的DOM元素之後。

首先，在您的HTML標記中，嘗試更改id="B+C"至id="D"。然後，在你的CSS，改變#B+C到#D

工作例如：https://jsfiddle.net/gkh2pj2j/1/

來源

2017-03-14 20:06:57

太棒了。我很高興你能工作。 –

嗨馬特，謝謝你的迴應，我刪除了代碼中的任何地方的b + c（該頁面的工作原理都是一樣的），但我仍然無法更改B或C上的背景色 – TEDEDFRED

查看此工作示例：https ：//jsfiddle.net/gkh2pj2j/1/ –

的 '+' 符號被保留作爲種在CSS操作。它會在#B之後抓住#C（代碼是＃B +＃C）。因此，我建議將您的B + C ID更改爲B加C（如果該名稱適合您）。我編輯了你的代碼，包括id和css樣式。我將背景顏色更改爲紅色，但不要擔心我將您的顏色留下評論。我只是想讓它變得非常明顯，元素的顏色已經改變了。

body { 
 
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%); 
 
    background-color: white; 
 
    background-size: 70%; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    } 
 
    
 
    #A { 
 
    overflow: hidden; 
 
    border: none; 
 
    } 
 
    
 
    object { 
 
    width: 1500px; 
 
    height: 800px; 
 
    display: inline-block; 
 
    } 
 
    
 
    #B { 
 
    background-color: #777676; 
 
    clear: both; 
 
    display: flex; 
 
    overflow: hidden; 
 
    margin-left: -10px; 
 
    border: none; 
 
    width: 600px; 
 
    border: thick; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-right: 0px; 
 
    float: left; 
 
    } 
 
    
 
    #C { 
 
    background-color: #777676; 
 
    clear: both; 
 
    display: flex; 
 
    flex: 0 1 auto; 
 
    overflow: hidden; 
 
    border: thick; 
 
    width: 1250px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-right: -10px; 
 
    } 
 
    
 
    #B-plus-C { 
 
    /*background-color: #777676;*/ 
 
\t background-color:red; 
 
    clear: both; 
 
    overflow: hidden; 
 
    border: none; 
 
    width: 1900px; 
 
    height: 1000px; 
 
    } 
 
    
 
    .webmaster { 
 
    background-color: #777676; 
 
    clear: both; 
 
    margin-left: -10px; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    height: 80px; 
 
    width: 1920px; 
 
    border: none; 
 
    font-family: Georgia; 
 
    text-align: justify; 
 
    padding: 20px 640px; 
 
    font-size: 20px; 
 
    margin-top: -5px; 
 
    } 
 
    
 
    a:link { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    } 
 
    
 
    a:visited { 
 
    text-decoration: none; 
 
    color: #4C4C4C; 
 
    } 
 
    
 
    a:hover { 
 
    text-decoration: none; 
 
    color: #B2B2B2; 
 
    } 
 
    
 
    a:active { 
 
    color: #000000; 
 
    text-decoration: underline; 
 
    }

<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rodriguez Tullio Propiedades</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="A"> 
 
    <object type="text/html" data="A.html"> 
 
</object></div> 
 
    <div id="B-plus-C"> 
 
    </div> 
 
    <div id="B"> 
 
    <object type="text/html" data="B.html"> 
 
</object></div> 
 
    <div id="C"> 
 
    <object type="text/html" data="C.html"> 
 
</object></div> 
 

 
    <div class="webmaster">2017 | <a href="mailto:[email protected]">[email protected]</a> |</div>

來源

2017-03-14 20:11:03 Neil

好吧，所以我刪除了連接在一起B和C的層（顯然它沒用），但現在我不能更改B或C上的背景。我似乎無法放置我的代碼在評論中，但它只是相同的代碼擦除B + C – TEDEDFRED

嘿，你的歡迎，如果你可以upvote，那會很棒。 – Neil

不能改變特定div的背景顏色

回答

相關問題