Question

我想了解一下我在CSS类选择中遇到的一些行为。

我试图仅引用用作两个单独父类的子级的css类line-1。第一个实例还有一个额外的类名。您可以在下面看到。基本上我需要选择所有.line-1类。两者都有不同的父母.row icon explainBlah＆amp; .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/wheel@2x.png" alt="wheel@2x.png" 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/stop@2x.png" alt="stop@2x.png" 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/frame@2x.png" alt="frame@2x.png" 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无效

Answer 1

删除第一个类选择并仅使用第二个。

.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的其他样式

Answer 2

为什么不简单地定位“.line-1”而不是按层次结构，因为您希望使用class =“line-1”本身设置所有元素的样式。

选择嵌套的CSS类

2 个答案: