選擇器的CSS問題

我想從red到pink的所有DIV都被標記爲紅色，並且從pink到red的DIV被標記爲粉紅色。但是，這並不工作（全部爲紅色）：選擇器的CSS問題

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
div { 
    display: inline-block; 
    padding: 50px; 
    background: yellow; 
    border: solid 1px black; 
} 

.pink div { 
    background: pink; 
} 

.red div { 
    background: red; 
} 
</style> 
</head> 
<body> 

<div class="red"> 
    <div> 
     <div> 
      <div> 
       <div> 
        <div class="pink"> 
         <div> 
          <div> 
           <div class="red"> 
            <div> 
             <div> 
              <div> 
               <div class="pink"> 
                <div> 
                 <div> 
                  <div> 
                   <div> 
                    <!-- and so on --> 
                   </div> 
                  </div>          
                 </div> 
                </div>            
               </div> 
              </div>          
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

我知道爲什麼它不工作，但現在我要尋找一個解決方案。請提出任何建議，只要：

它是在純CSS中;
它不需要定義ID;
它可以適用於任何數量的DIV;
可以爲任何DIV定義類名（red和pink）。

來源

2011-08-31 Ted

EDITED

background: inherit是你的朋友。由於背景通常不會繼承。

div { 
    display: inline-block; 
    padding: 10px; 
    background: yellow; 
    border: solid 1px black; 
} 

div div { 
    background: inherit; 
} 

.red { 
    background: red; 
} 

.pink { 
    background: pink; 
}

http://jsfiddle.net/pU6Ds/2

現在滑動這些關閉的側面證明了每個人心中都有一個不透明的背景：

http://jsfiddle.net/pU6Ds/1/

來源

2011-08-31 16:52:53

您可以使用以下，其中最重要的部分是常規div的默認background-color: transparent;，它允許background-color（在.pink和.red div上指定）顯示：

div { 
    display: block; 
    min-height: 2em; 
    margin: 0 auto; 
    padding: 0.2em 0; 
    border: 1px solid #000; 
    background-color: transparent; 
} 
.red { 
    background-color: red; 
} 
.pink { 
    background-color: pink; 
}

JS Fiddle demo。

來源

2011-08-31 16:53:30

選擇器的CSS問題

回答

相關問題