Как ссылаться на вложенные классы с помощью css?

Question

При использовании css, как я могу указать вложенный класс.

Вот мой html код:

<div class="box1"> 
    <div class="box box-default"> 
     <div class="box-header with-border"> 
     <h3 class="box-title">Collapsable</h3> 
     <div class="box-tools pull-right"> 
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 
     </div><!-- /.box-tools --> 
     </div><!-- /.box-header --> 
     <div class="box-body"> 
     <p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p> 
     <p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p> 
     <p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p> 
     <p><i class="fa fa-envelope"></i><span style=""> Email : example@address.com</span></p> 
     </div><!-- /.box-body --> 
    </div><!-- /.box --> 
</div> 

Этот css код работает правильно для всех html на странице:

<style type="text/css"> 
    i{width: 30px;} 
</style> 

Как я могу указать iclass в классе box1box-body ?

Вот код, который я пробовал:

<style type="text/css"> 
    box1 box-body i{width: 30px;} 
</style> 

Спасибо заранее.

Answer 1

В CSS classes необходимость префикс ., ids должен иметь префикс #, и элементы не обязательно должны быть префиксами вообще.

Это, как вы должны объявить CSS:

.box1 .box-body i { 
    width: 30px; 
} 

Обратите внимание, что box1 и box-body являются оба класса, в то время как i элемент.

---

Пример:

<div class="class"></div> 
<div id="id"></div> 
<div></div> 

Я перечислил три различных <div> элементов. Вот как они будут доступны в CSS:

// first div 
.class { 
[some styling] 
} 

// second div 
#id { 
[some styling] 
} 

// third div 
div { 
[some styling] 
} 

Answer 2

Классы в CSS требуют периодов до них. Примечание i не так как это элемент, а не класс.

<style type="text/css"> 
    .box1 .box-body i{width: 30px;} 
</style> 

Answer 3

Вам просто нужно знать, как работают селекторы css. Here - краткое описание о селекторах css.

В вашем случае,

.box .box-body i{ 
    width:30px; 
} 

пространство между двумя селекторами определяет второй элемент является дочерним по первой. В вашем случае элемент i является дочерним элементом элемента, который имеет класс box-body. и этот элемент является дочерним элементом класса, который имеет класс .box.

Answer 4

селекторов для классов в CSS нужно "":

.box1 .box-body i{/*your style*/} 

Может быть, вы должны смотреть на этой странице:

Selectors

Answer 5

<style type="text/css"> 
    .box1 .box-body i{width: 30px;} 
    </style>