更改的類不工作的背景顏色屬性

這可能是一個愚蠢的問題，但我在互聯網上搜索它，即使在堆棧溢出，但我無法理解問題。代碼非常簡單：更改的類不工作的背景顏色屬性

HTML：

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <title>DOCUMENT OBJECT MODEL</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <ul> 
      <li class="sameClass" style="background-color:black; color:white; margin:5px; ">ONE</li> 
      <li class="sameClass" style="background-color:black; color:white; margin:5px ">TWO</li> 
      <li class="sameClass" style="background-color:orange; color:red; margin:5px">THREE</li> 
      <li class="sameClass" style="background-color:orange; color:red; margin:5px">FOUR & FIVE</li> 
     </ul> 
     <div id="getValues"></div> 
     <script src="javascript.js"></script> 
    </body> 
</html>

CSS：

li.differentClass{ 
    background-color:orange; 
}

JS：

var element = document.querySelector("li.sameClass"); 
element.className = "differentClass";

現在，腳本修改第一個列表項的類名，這是理解的。而在樣式表中，className爲「differentClass」的列表項將改變其外觀。例如，在CSS中，我寫了這樣的內容：

li.differentClass{ 
    border:solid 5px pink; 
}

這個工作沒有任何問題。但是，看看我的原始代碼。帶有className「differentClass」的列表項應使其背景顏色更改爲橙色。但這不起作用。不僅如此，像「色彩」這樣的屬性也不會改變。

什麼問題？

來源

2015-10-14 codetalker

這可能是因爲您不刪除內聯樣式。內聯樣式覆蓋外部CSS。 – TylerH

可能是'style'標籤的問題？有可能這個班正在被推翻。 – camelCase

用這個代替：

li.differentClass{ 
background-color:orange !important; 
}

，我建議閱讀本：css-tricks

來源

2015-10-14 16:18:21 Nick

好的.. thnx的幫助 – codetalker

好的鏈接，但儘量避免使用'！important'，如果可以的話。 TylerH在評論中是正確的，你需要避免內聯樣式。 – gaynorvader

@gaynorvader這是覆蓋內聯樣式的唯一純CSS方法。 – Nick

如果你已經使用inline CSS屬性，然後改變不是嵌入財產以外的任何樣式，你可以使用類添加這些property to element，但是用於更改內聯屬性使用style元素的屬性。

JSFiddle

例如：

element.style.backgroundColor = "red"; // To override inline property

但對於增加字體大小或其他財產，未通過內嵌CSS設置，你可以使用class

// CSS 
li.differentClass{ 
    border:solid 5px pink; 
} 

//JS 
element.className = "differentClass"; // To add property which are not set by inline css

來源

2015-10-14 16:26:30

是的... Thnx的提示 – codetalker

更改的類不工作的背景顏色屬性

回答

相關問題