如何用css引用嵌套类？

rt4zxlrg 于 2022-12-24 发布在其他

关注(0)|答案(5)|浏览(157)

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

如何在box1box-body类中指定iclass？
下面是我尝试过的代码：

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

css

来源：https://stackoverflow.com/questions/30505225/how-to-reference-nested-classes-with-css

5条答案

按热度按时间

uhry853o1#

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

赞(0）回复(0）举报 2022-12-24

bvn4nwqk2#

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

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

赞(0）回复(0）举报 2022-12-24

jslywgbw3#

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

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

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

赞(0）回复(0）举报 2022-12-24

vltsax254#

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

赞(0）回复(0）举报 2022-12-24

cxfofazt5#

你只需要知道css选择器是如何工作的。Here是关于css选择器的简要描述。
就你而言，

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

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

赞(0）回复(0）举报 2022-12-24

我来回答

如何用css引用嵌套类？

5条答案

相关问题

热门标签

最新问答