Comment référencer les classes imbriquées avec css?

Lors de l'utilisation de css, comment puis-je spécifier une classe imbriquée.

Voici mon 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 : 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>

Ce css code fonctionne correctement pour tous les html sur la page:

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

Comment puis-je spécifier le i class dans le box1 box-body classe?

Voici le code que j'ai essayé:

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

Merci d'avance.

  • Vous avez besoin de mettre un arrêt complet / temps dans votre classe états .box1 .box-body i{width: 30px;}
  • Jetez un oeil à ce tutoriel sur les sélecteurs: code.tutsplus.com/tutorials/...
InformationsquelleAutor user3736648 | 2015-05-28
  1. 9

    Dans le CSS, classes doivent être préfixés par un ., ids doivent être préfixés par #, et les éléments n'ont pas besoin d'être préfixés à tous.

    C'est la façon dont vous devez déclarer votre CSS:

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

    Noter que box1 et box-body sont les deux classes, alors que i est un élément.

    Exemple:

    <div class="class"></div>
<div id="id"></div>
<div></div>

    J'ai énuméré trois différents <div> éléments. C'est de cette façon qu'ils seraient consultés dans le CSS:

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

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

//third div
div {
[some styling]
}
    InformationsquelleAutor Friendly Crook
  2. 3

    Les classes dans votre CSS besoin périodes avant eux. Note i n'a pas puisque c'est un élément non une classe.

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

    Sélecteurs de classes en CSS besoin d'un ".":

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

    Peut-être que vous devriez jeter un oeil à cette page:

    Sélecteurs

    InformationsquelleAutor gmast
  4. 1
       <style type="text/css">
   .box1 .box-body i{width: 30px;}
   </style>
    InformationsquelleAutor Mudassar Saiyed
  5. -1

    Vous avez juste besoin de savoir comment les sélecteurs css de travail. Ici est brève description sur les sélecteurs css.

    Dans votre cas, 

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

    l'espace entre les deux sélecteurs définit deuxième élément est l'enfant de la première.
    Dans votre cas, l'élément i est élément enfant de l'élément qui a zone de corps de classe. et cet élément est l'élément enfant de la classe .la classe de boîte de.

    InformationsquelleAutor Laxmikant Dange