哪個更特別在CSS？

以下是我的代碼。爲什麼「hi」和「hello」都是白色背景色？我認爲元素.content .parti應該比.content p更具體，「hello」應該是橙色背景色。哪個更特別在CSS？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>particularity</title> 
    <style type="text/css"> 
     .content p { 
      background-color: white; 
     } 
     .content .parti { 
      background-color: orange; 
     } 
    </style> 
</head> 
<body> 
<div class="content"> 
    <p>hi</p> 
    <div class="parti"> 
     <p>hello</p> 
    </div> 
</div> 
</body> 
</html>

來源

2017-02-13 Sandy

有優先對CSS的順序，請參閱[這個問題]（http://stackoverflow.com/questions/25105736/what-is-the-order-of-優先順序爲css） – Irfan

.content .parti p{ 
     background-color: orange; 
    }

你的風格重量，對於DIV不是爲p元素。因此background-color: orange未被添加到p標籤。

來源

2017-02-13 03:53:06 Shubhranshu

https://css-tricks.com/specifics-on-css-specificity/這篇文章我認爲更好地解釋你的答案。 – Clemsonopoly94

@ Clemsonopoly94是。我也從那裏瞭解了CSS樣式重量概念 – Shubhranshu

謝謝。我犯了一個錯誤，那就是'background-color'不能被繼承。現在我將css文件更改爲'.content p {color：white; } .content .parti {color：orange; }'。 [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/），'.content .parti {color：orange; }'對於「你好」更具體，但它仍然是白色的。 – Sandy

<div class="parti"> 
    <p>hello</p> 
</div>

的p元素是在.parti DIV的頂部，所以你看到的是白色的。如果您將填充添加到.parti，您會看到它是背景顏色。

.content p { 
 
    background-color: white; 
 
} 
 
.content .parti { 
 
    background-color: orange; 
 
    padding: 10px; 
 
}

<div class="content"> 
 
    <div class="parti"> 
 
    <p>hello</p> 
 
    </div> 
 
</div>

來源

2017-02-13 03:52:26

非常感謝。我犯了一個錯誤，那就是'background-color'不能被繼承。我將'background-color'添加到'.content .parti'中，第二個'p'不能繼承這個屬性。 @Shubhranshu @Eugene – Sandy

謝謝。我犯了一個錯誤，那就是'background-color'不能被繼承。我將樣式更改爲'.content p {color：white; } .content .parti {color：orange; }'。 [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/），'.content .parti {color：orange; ''對於「你好」更具體，但它仍然是白色的。 – Sandy

第二個p是.content類div的子元素。這就是它繼承它的風格的原因。另外，正如@Shubhranshu所提到的，你將風格應用於div，而不是p。

來源

2017-02-13 04:07:41 Eugene

有優先級的CSS

CSS規則（在風格標籤）和CSS文件的順序由內聯CSS被覆蓋。
不太具體的選擇器優先於更具體的選擇器。
在代碼中較早出現的規則被稍後出現的規則覆蓋（相同的特徵）。

由於第3點，背景仍然是白色的。

積分：堆棧溢出this答案

來源

2017-02-13 04:17:04 Irfan

哪個更特別在CSS？

回答

相關問題