使用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>
提前致谢。
最佳答案
在 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]
}
关于html - 如何用CSS引用嵌套类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30505225/