CSS嵌套：從誰那裏繼承？

這裏是問題的一個小提琴：
https://jsfiddle.net/c2exs2f7/3/CSS嵌套：從誰那裏繼承？

如何在第二個「藍色」留像第一個實例（它應該有color: white）不改變HTML結構？

HTML

<div class="blue"> 
    <div class="content"> 
    <div class="label">blue</div> 
    <div class="yellow"> 
     <div class="content"> 
     <div class="label">yellow</div> 
     <div class="blue"> 
      <div class="content"> 
      <div class="label">blue</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

SCSS

// Skip until... 

div { 
    border-radius: .25em; 
    padding: .5em; 
    font-family: helvetica, sans-serif; 
} 

// ...here: 

.blue { 
    background-color: hsl(220,100%,50%); 

    .content { 
    color: white; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 

    .content { 
    color: hsl(0,0%,10%); 
    } 
}

編輯＃1 感謝您對這些快速響應的傢伙！
我正在一個網格系統，我可以嵌套不同的網格系統（具有不同的CSS值）。

來源

2015-04-06 michaelcssguy

擁有一個jsfiddle是一個很好的補充，但你應該總是包含問題本身的重要部分。一個問題（也是一個答案）應該始終是獨立的，因爲外部鏈接可能會失效。 – 2015-04-06 00:20:37

好的。謝謝！我很喜歡這個:) – michaelcssguy 2015-04-06 00:41:25

選擇器.yellow .content和.blue .content具有相同specificity（20在這種情況下），因此，後來出現在樣式表選擇器將覆蓋第一個由於樣式表的級聯性質。在這種情況下，選擇器.yellow .content覆蓋.blue .content，這就是嵌套的.blue元素爲黑色的原因。

一個快速的解決辦法是選擇與選擇.blue .blue嵌套.blue元素：

：

Updated Example

.blue, 
.blue .blue { 
    background-color: hsl(220,100%,50%); 

    .content { 
     color: white; 
    } 
}

一個可以說是更好的方法是隻使用child selector, >選擇直接.content子元素

Updated Example

.blue { 
    background-color: hsl(220,100%,50%); 

    > .content { 
     color: white; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 

    > .content { 
     color: hsl(0,0%,10%); 
    } 
}

根據您的意見，元素的排序/分層可能會有所不同。另一種解決辦法是設置.blue/.yellow元素上的color屬性，然後設置子元素來inherit的color屬性：

Updated Example - 這似乎對所有變體工作。

.blue { 
    background-color: hsl(220,100%,50%); 
    color: white; 

    .content { 
     color: inherit; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 
    color: hsl(0,0%,10%); 

    .content { 
     color: inherit; 
    } 
}

來源

2015-04-06 00:17:31

我喜歡這種第一種方法，但如果HTML標記是「黃色>黃色>藍色」，它將不起作用：https：//jsfiddle.net/jzbjd655/1/。有沒有更好的方法來實現這一點，而沒有聲明每一種可能的混合藍色和黃色的特定順序？使用子選擇器的第二個例子是這個簡單的例子，但我不確定是否可以保證母親和孩子之間不會有一些「圖層」-div。 – michaelcssguy 2015-04-06 00:51:21

偉大的新解決方案。有沒有類似的方式來實現我的目標，而不給予藍色的白色？如果我有一個網格系統，你的解決方案不會那麼好。在你的例子中，沒關係.blue和.yellow獲得一種顏色。如果在我的真實項目中，像「.row」這樣的父級獲得「.column」寬度屬性的值，那就不太好了。 – michaelcssguy 2015-04-06 01:36:38

見https://jsfiddle.net/c2exs2f7/4/

我所做的就是強制繼承僅歸DIV，而不是整個descendance孩子content。

在SCSS中應用直接子女操作員>使得.content div僅考慮其直接父親顏色。

繼續嘗試嵌套更多DIV s，你會看到它的工作原理。

來源

2015-04-06 00:22:27 Niloct

你不行。不管怎樣因爲第二個藍色將從黃色固有。所以如果你想要所有的藍色總是有白色字母和黃色總是黑色字母。爲什麼不只是放：

.blue { color: #fff; } 
.yellow { color: hsl(0,0%,10%); }

而且你將不需要「.content」包裝。

來源

2015-04-06 00:25:07 stevenvanc

這是一個好主意。我的問題是我的代碼是對網格系統的一些簡化。 – michaelcssguy 2015-04-06 00:54:44

CSS嵌套：從誰那裏繼承？

回答

相關問題