¿Cómo hacer referencia a clases anidadas con css?

Al usar CSS, ¿cómo puedo especificar una clase anidada?

Aquí está mi marcado 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>

Este css el código funciona correctamente para todos los html en la pagina:

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

¿Cómo puedo especificar el i class en el box1 box-body ¿clase?

Aquí está el código que he probado:

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

En CSS, classes van precedidos de un ., ids están precedidos por #y los elementos no tienen ningún prefijo.

Así es como necesitas declarar tu CSS:

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

Tenga en cuenta que box1 y box-body son ambas clases, mientras que i es un elemento

Ejemplo:

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

He enumerado tres diferentes <div> elementos. Así es como se accedería a ellos en CSS:

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

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

// third div
div {
[some styling]
}

Las clases en su CSS necesitan períodos antes de ellas. Nota i no lo hace ya que es un elemento, no una clase.

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

Los selectores de clases en CSS necesitan un “.”:

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

Tal vez deberías echar un vistazo a esta página:

Selectores

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

Solo necesita saber cómo funcionan los selectores css. Aquí es una breve descripción de los selectores css.

En tu caso,

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

el espacio entre dos selectores define que el segundo elemento es hijo del primero. En su caso, el elemento i es un elemento secundario del elemento que tiene una clase de cuerpo de caja. y ese elemento es un elemento secundario de la clase que tiene la clase .box.