更簡潔的CSS選擇當前和子元素

作爲一個通用的CSS框架的一部分，我已經建立了各種控制。我希望使用通用和靈活的類將其設置爲品牌顏色，同時保持CSS儘可能小。

由於需要樣式的元素和控件的數量，CSS文件堆滿了以品牌爲中心的風格。爲了實現靈活的結構我的願望，它看起來像我將不得不翻倍（或三時）從

.brand.brand-red .control.brand-control { color: red; }

每一個單一品牌的規則到

.brand.brand-red .control.brand-control,  /* Required */ 
.brand .brand-red .control.brand-control,  /* Required */ 
.brand .brand-red.control.brand-control { /* Useful */ 
    color: red; 
}

這是不太理想，因爲它幾乎是我CSS文件的整體大小的三倍，我迫切希望儘可能小。 有什麼辦法可以將第二塊CSS寫得更小？

理想我想能夠做這樣的事情：

.brand & .brand-red.control & .brand-control { ... } 
    /* or */ 
.brand/.brand-red.control/.brand-control { ... }

，但我敢肯定，沒有什麼存在這樣的事情是，如果它是永遠。

摘要

我想我的通用CSS要儘可能小，但對於所有的下列結構仍然有效：

/* COLOURS // BRAND COLOURS */ 
 
.brand.brand-red .control.brand-control,  /* Required */ 
 
.brand .brand-red .control.brand-control,  /* Required */ 
 
.brand .brand-red.control.brand-control { /* Useful */ 
 
    color: red; 
 
} 
 

 
.brand.brand-red.control.brand-control {  /* Not Required */ 
 
    color: red; 
 
}

<div class="brand brand-red"> 
 
    <div class="control brand-control">Test 1 // Required</div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red"> 
 
     <div class="control brand-control">Test 2 // Required</div> 
 
    </div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red control brand-control">Test 3 // Useful</div> 
 
</div> 
 

 
<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

參考：

W3Schools // CSS Selectors Reference

來源

2016-07-13 Matthew Hudson

不...這是不可能的與當前狀態的CSS。SASS等可以使它更容易編寫，但它仍然輸出相同的CSS。 –

屁股我看到了。（在這個測試中）你想要的所有顏色......有一個'.brand-red'類。爲什麼不使用'.brand-red {color：red}'？ –

@Paulie_D感謝您的建議！我儘可能多地想，但希望能有一種方法來最小化輸出CSS。仍然試圖說服我的組織採用預處理器來編寫它確實也是一種痛苦。 –

什麼你正在努力實現利用CSS選擇器目前是不可能的。

您可以指定：

.parent-class.another-parent-class
.parent-class > .direct-child-class
.parent-class .descendant-class
，當然還有很多其他的cool options ...

但不幸的是你沒有用於選擇父元素的選項，以及可能適用的另一個類在它上面，或者它的任何後代。

對不起:-)

來源

2016-07-13 13:16:45

反正你正在使用。品牌紅

.brand-red { 
 
    color: red; 
 
}

<div class="brand brand-red"> 
 
    <div class="control brand-control">Test 1 // Required</div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red"> 
 
     <div class="control brand-control">Test 2 // Required</div> 
 
    </div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red control brand-control">Test 3 // Useful</div> 
 
</div> 
 

 
<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

來源

2016-07-13 13:13:20 Umesh

更簡潔的CSS選擇當前和子元素

回答

相關問題