选择嵌套的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类

回答

相关问题