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 i
class
dans la classe box1
box-body
?
Voici le code que j'ai essayé:
<style type="text/css">
box1 box-body i{width: 30px;}
</style>
Merci d'avance.
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]
}
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>
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:
<style type="text/css">
.box1 .box-body i{width: 30px;}
</style>