Я хотел бы понять, с каким поведением я сталкиваюсь при выборе класса 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

1
Harry 25 Фев 2016 в 19:54

2 ответа

Лучший ответ

Удалите выделение первого класса и используйте только второй.

.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

1
Aaron 25 Фев 2016 в 17:17

Почему бы вам не использовать простую цель «.line-1» вместо того, чтобы идти по иерархии, поскольку вы хотите стилизовать все элементы с помощью class = «line-1».

0
Shashank 25 Фев 2016 в 17:18