web-dev-qa-db-fra.com

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

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

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

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

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

Comment spécifier le iclass dans la classe box1box-body?

Voici le code que j'ai essayé:

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

Merci d'avance.

htmlcssclassnested-class
5
user3736648

En CSS, classes doit être préfixé par un ., ids doit être préfixé par # et les éléments n'ont pas besoin de l'être du tout.

Voici comment vous devez déclarer votre CSS:

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

Notez 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 répertorié trois éléments <div> différents. Voici comment ils seraient accessibles en CSS:

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

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

// third div
div {
[some styling]
}
4
Friendly Crook

Les classes de votre CSS ont besoin de temps. Note i ne le fait pas car c'est un élément et non une classe.

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

Les sélecteurs de classes en CSS nécessitent un ".":

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

Peut-être devriez-vous jeter un coup d'œil sur cette page:

Sélecteurs

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