如何使用 css 引用嵌套类？答案

【问题标题】：How to reference nested classes with css?如何使用 css 引用嵌套类？
【发布时间】：2015-08-10 21:10:55
【问题描述】：

使用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>

如何在box1 box-body 类中指定i class？

这是我尝试过的代码：

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

提前致谢。

【问题讨论】：

你需要在你的课堂陈述中加上句号/句号.box1 .box-body i{width: 30px;}
看看这个关于选择器的精彩教程：code.tutsplus.com/tutorials/…

标签： html css class nested-class

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你只需要知道 css 选择器是如何工作的。 Here 是关于 css 选择器的简要说明。

在你的情况下，

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

两个选择器之间的空间定义了第二个元素是第一个元素的子元素。在您的情况下，元素 i 是具有 box-body 类的元素的子元素。并且该元素是具有 .box 类的类的子元素。

【讨论】：

【解决方案3】：

CSS 中的类选择器需要一个“.”：

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

也许你应该看看这个页面：

Selectors

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在 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]
}

【讨论】：