Html 如何使用 css 引用嵌套类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30505225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reference nested classes with css?
提问by user3736648
When using css, how can I specify a nested class.
使用 css 时，如何指定嵌套类。
Here is my htmlcode:
这是我的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>
This csscode works correctly for the all the htmlon the page:
此css代码适用html于页面上的所有内容：
<style type="text/css">
i{width: 30px;}
</style>
How can I specify the iclassin the box1box-bodyclass?
如何iclass在box1box-body类中指定？
Here is the code that I have tried:
这是我尝试过的代码：
<style type="text/css">
box1 box-body i{width: 30px;}
</style>
Thanks in advance.
提前致谢。
回答by Friendly Crook
In CSS, classesneed to be prefixed by a ., idsneed to be prefixed by #, and elements don't need to be prefixed at all.
在 CSS 中，classes需要以 a 为前缀.，ids需要以 为前缀#，元素完全不需要前缀。
This is how you need to declare your CSS:
这是您需要声明 CSS 的方式：
.box1 .box-body i {
width: 30px;
}
Note that box1and box-bodyare both classes, while iis an element.
请注意，box1andbox-body都是类，而 whilei是一个元素。
Example:
示例：
<div class="class"></div>
<div id="id"></div>
<div></div>
I have listed three different <div>elements. This is how they would be accessed in CSS:
我列出了三个不同的<div>元素。这是在 CSS 中访问它们的方式：
// first div
.class {
[some styling]
}
// second div
#id {
[some styling]
}
// third div
div {
[some styling]
}
回答by Steve
The classes in your CSS need periods before them. Note idoesn't since it's an element not a class.
CSS 中的类在它们之前需要句号。注意i不是，因为它是一个元素而不是一个类。
<style type="text/css">
.box1 .box-body i{width: 30px;}
</style>
回答by gmast
回答by Mudassar Saiyed
<style type="text/css">
.box1 .box-body i{width: 30px;}
</style>
回答by Laxmikant Dange
You just need to know how css selectors work. Hereis brief description about css selectors.
你只需要知道 css 选择器是如何工作的。这里是关于 css 选择器的简要说明。
In your case,
在你的情况下，
.box .box-body i{
width:30px;
}
space between two selectors defines second element is child of first. In your case, element i is child element of element which has box-body class. and that element is child element of class which has .box class.
两个选择器之间的空格定义第二个元素是第一个元素的子元素。在您的情况下，元素 i 是具有 box-body 类的元素的子元素。该元素是具有 .box 类的类的子元素。
