[解決済み] cssでネストしたクラスを参照するには？

質問

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 : [email protected]</span></p>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

これは css のコードは、すべての html を表示します。

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

を指定するにはどうしたらよいですか？ i class を box1 box-body クラスですか？

以下は、私が試したコードです。

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

よろしくお願いします。

どのように解決するのですか？

CSSで classes が必要です。 . , ids が必要です。 # また、要素には接頭辞を付ける必要はありません。

このように、CSSを宣言する必要があります。

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

なお box1 と box-body はどちらもクラスですが i は要素です。

例 :

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

を3種類リストアップしました。 <div> 要素を使用します。CSSではこのようにアクセスされます。

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

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

// third div
div {
[some styling]
}