如何用css引用嵌套类？ [英] How to reference nested classes with css?

问题描述

这是我的 html 代码：

在使用css时，我怎样才能指定一个嵌套类。 / p>

 < 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-tooldata-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 =>电话：8000000000< / span>< / p> 
< p>< i class =fa fa-home>< / i>< span style =>网址：http：//www.example.com< / span>< / p> 
< p>< i class =fa fa-map-marker>< / i>< span style =>地图：示例地图地址< / span>< / p> 
< p>< i class =fa fa-envelope>< / i>< span style =>电子邮件：[e-mail]< / span>< / p> 
< / div><！ -  /.box-body  - > 
< / div><！ -  /.box  - > 
< / div> 
  

这个 css

 < style type =text / CSS> 
 i {width：30px;} 
< / style> 
  

如何指定 i <$ box1 box-body class？

中的c $ c> class

下面是我试过的代码：

 < style type =文本/ CSS> 
 box1 box-body i {width：30px;} 
< / style> 
  

预先致谢。

解决方案

在CSS中， classes 需要前缀为。， ids 需要前缀为＃，并且元素根本不需要加前缀。

这就是你需要声明你的CSS的方式：

 。 box1 .box-body我{
 width：30px; 
 
  

请注意 box1 和 box-body 都是类，而 i 是一个元素。

---

示例：

 < ; div class =class>< / div> 
< div id =id>< / div> 
< div>< / div> 
  

我列出了三个不同的< div> 元素。这是他们如何在CSS中访问：

  //第一个div 
 .class {
 [一些样式] 
} 
 
 //第二个div 
 #id {
 [某些样式] 
} 
 
 //第三格
格{
 [某些造型] 
} 
  

When using css, how can I specify a nested class.

Here is my html code:

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

This css code works correctly for the all the html on the page:

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

How can I specify the i class in the box1 box-body class?

Here is the code that I have tried:

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

Thanks in advance.

解决方案

In CSS, classes need to be prefixed by a ., ids need to be prefixed by #, and elements don't need to be prefixed at all.

This is how you need to declare your CSS:

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

Note that box1 and box-body are both classes, while i is an element.

---

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:

// first div
.class {
[some styling]
}

// second div
#id {
[some styling]
}

// third div
div {
[some styling]
}

这篇关于如何用css引用嵌套类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！