如何用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 : [phone]</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 : [e-mail]</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>

提前致谢。

原文由 Simon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

In CSS, classes are prefixed by a . , ids are prefixed by # , and elements are not prefixed at all.

这是您需要声明 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]
}

原文由 Friendly Crook 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS 中的类在它们之前需要句点。注意 i 不是因为它是一个元素而不是一个类。

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

原文由 Steve 发布，翻译遵循 CC BY-SA 3.0 许可协议