選擇嵌套的CSS類

我想了解我遇到的CSS類選擇的一些行爲。選擇嵌套的CSS類

我正在嘗試引用僅用作兩個單獨父類的子項的css類line-1。第一個實例還有一個額外的類名。你可以在下面看到。基本上我需要選擇所有.line-1類。兩者都有不同的父母.row icon explainBlah & .row icon。

的index.html

<div class="row icon explainBlah"> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox long"> 
     <div class="title">1</div> 
     <div class="line-1"></div> 
     <div class="description">blah blah 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox long"> 
     <div class="title">2</div> 
     <div class="line-1"></div> 
     <div class="description">blah blah 
     </div> 
    </div> 
    </div> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox long"> 
     <div class="title">3</div> 
     <div class="line-1"></div> 
     <div class="description">blah blah 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox long"> 
     <div class="title">4</div> 
     <div class="line-1"></div> 
     <div class="description">blah blah 
     </div> 
    </div> 
    </div> 
</div> 

<div class="row icon"> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox"><img src="images/icons/smartphone.svg" alt="smartphone.svg" height="30"> 
     <div class="title">Mobile</div> 
     <div class="line-1"></div> 
     <div class="description">Blah 2 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30"> 
     <div class="title">Efficiency</div> 
     <div class="line-1"></div> 
     <div class="description">Blah 2 <strong> Blah 2 </strong> Blah 2 
     </div> 
    </div> 
    </div> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30"> 
     <div class="title">No discovery</div> 
     <div class="line-1"></div> 
     <div class="description">Blah 2 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3 col-xs-6"> 
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30"> 
     <div class="title">Clarity</div> 
     <div class="line-1"></div> 
     <div class="description">Blah 2 
     </div> 
    </div> 
    </div> 
</div>

我已經設法成功地選擇的.line-1元素都子實例按照第一個例子：

index.styl

.featureBox.long, .row.icon .featureBox 
    .line-1 
     max-width 160px

但我很驚訝，當這第二.featureBox組元素沒有工作：

index.styl

.featureBox.long, .featureBox 
    .line-1 
     max-width 160px

看到作爲直接參考.featureBox.long工作，爲什麼不.featureBox爲什麼我必須像第一個例子那樣使用.row.icon .featureBox？

解

很簡單：

.row.icon .featureBox 
    .line-1 
     max-width 180px

更 '特定' 選擇即.row.icon .featureBox.long列入以上會使無效.row.icon .featureBox

來源

2016-02-25 Harry

請說明您的具體問題或添加其他詳細信息，以確切地突出顯示您的需求。正如目前所寫，很難確切地說出你在問什麼。 –

我已經讀了你的問題三次，仍然不知道問題是什麼 – j08691

@ j08691我也是！ – dippas

移除第一類選擇和僅使用第二。

.row.icon .featureBox .line-1 { 
    //selects .line-1 of every .featureBox element that is a child of .row.icon 
} 


.row.icon .featureBox.long .line-1 { 
    //selects .line-1 every .featureBox element that is a child of .row.icon and has an extra class of .long 
}

通過包括.row.icon你正在做的選擇更加具體，以便將緩繳應用於.featureBox

來源

2016-02-25 17:10:16 Aaron

但他說他瞄準的是'line-1'。 – 2016-02-25 17:15:50

正確，更新了我的答案。 – Aaron

謝謝@Aaron - 根據你的解釋，事實證明，一個更具體的選擇器將優先於更一般的選擇器，並（令人驚訝地）使他們無效 - 我使用的解決方案是在我的問題 – Harry

其他款式更高的優先級你爲什麼不簡單的目標」 .line區段-1" ，而不是因爲您希望使用class =「line-1」本身對所有元素進行樣式設置。

來源

2016-02-25 17:18:28 Shashank

選擇嵌套的CSS類

回答

相關問題