Cascading Parent-Child

我希望所有.box p顏色都是粉紅色，但似乎所有在#container中的.box p都有紅色。我希望級聯會改變顏色，但我認爲我犯了一個錯誤。Cascading Parent-Child

你能告訴我我錯了嗎？

感謝

/_ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ____

<html> 
<head> 
<title> Buvbvn</title> 
<style type="text/css"> 
p {color: #F00;} 



/* container holds all visible page elements */ 
#container{ 
padding:20px; 
border:20px solid #000; 
background: #CCC; 
} 


.box{ 
margin: 10px; 
padding:20px; 
border: 1px solid #000; 
} 



/* Make text red only for paragraphs within the container */ 
#container p { 
    color: #F00; 
    } 


/* Make text pink only for paragraphs within the box class */ 
.box p { 
    color: #FF00FF; 
    } 

</style> 



</head> 
<body> 

<div id ="container"> 
<p>This is our content area.</p> 
<div class = "box"> 
<p >I'm in a box!</p> 



</div> 
<div class = "box"> 
<p >I'm also in a box!</p> 
</div> 

</div> 

<div class = "box"> 
<p >I'm also in a box!</p> 
</div> 

</body>

來源

2011-04-23 goto

做什麼？ – Maverick 2011-04-23 16:12:12

的問題不是級聯，這是選擇的特異性。基於id的選擇器比基於class的選擇器更具體。

您當前的代碼產生了這樣的結果：JS Fiddle demo。

要修改，這麼一個.box內的所有段落都是粉紅色的，你可以刪除從選擇的id，只具有p，或類添加到選擇，給：#content .box p：

#container .box p, /* addresses those paragraphs inside a .box that's inside #container */ 
.box p { /* addresses those paragraphs inside a .box, but not necessarily the #container */ 
color: #FF00FF; 
}

JS Fiddle demo。

來源

2011-04-23 16:11:30

將這個：

 
.box p { 
    color: #FF00FF !important; 
}

來源

2011-04-23 16:10:17 locrizak

雖然這樣做有效，但重要的是要記住'！important'正在拿大錘來破解核桃。從長遠來看，修改選擇器通常更容易......（這不**代表倒票，只是（有希望）建設性的批評）。 – 2011-04-23 16:16:41

@大衛我聽到你。謝謝 – locrizak 2011-04-23 16:32:27

我建議：你想用一個類中的所有元素有粉紅色文字

p { 
    color: #F00; /* Red */ 
} 

.box p { 
    color: #F0F; /* Pink */ 
}

來源

2011-04-23 16:12:27

Cascading Parent-Child

回答

相關問題