Simon
Wie kann ich bei der Verwendung von CSS eine verschachtelte Klasse angeben?
Hier ist mein HTML-Markup:
<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>
Das css
Code funktioniert für alle korrekt html
auf der Seite:
<style type="text/css">
i{width: 30px;}
</style>
Wie kann ich die angeben i
class
im box1
box-body
Klasse?
Hier ist der Code, den ich versucht habe:
<style type="text/css">
box1 box-body i{width: 30px;}
</style>
Freundlicher Gauner
Im CSS, classes
wird ein vorangestellt .
, ids
vorangestellt sind #
und Elemente werden überhaupt nicht vorangestellt.
So müssen Sie Ihr CSS deklarieren:
.box1 .box-body i {
width: 30px;
}
Beachten Sie, dass box1
Und box-body
sind beide Klassen, während i
ist ein Element.
Beispiel :
<div class="class"></div>
<div id="id"></div>
<div></div>
Ich habe drei verschiedene aufgelistet <div>
Elemente. So würde man in CSS darauf zugreifen:
// first div
.class {
[some styling]
}
// second div
#id {
[some styling]
}
// third div
div {
[some styling]
}
Die Klassen in Ihrem CSS benötigen Punkte davor. Notiz i
nicht, da es ein Element ist, keine Klasse.
<style type="text/css">
.box1 .box-body i{width: 30px;}
</style>
Selektoren für Klassen in CSS benötigen ein “.”:
.box1 .box-body i{/*your style*/}
Vielleicht schaust du dir mal diese Seite an:
Selektoren
<style type="text/css">
.box1 .box-body i{width: 30px;}
</style>
Sie müssen nur wissen, wie CSS-Selektoren funktionieren. Hier ist eine kurze Beschreibung über CSS-Selektoren.
In Ihrem Fall,
.box .box-body i{
width:30px;
}
Der Abstand zwischen zwei Selektoren definiert, dass das zweite Element dem ersten untergeordnet ist. In Ihrem Fall ist das Element i ein untergeordnetes Element des Elements mit der Box-Body-Klasse. und dieses Element ist ein untergeordnetes Element der Klasse, die die Klasse .box hat.
144529 0 0 cookie-check Wie kann man mit CSS auf verschachtelte Klassen verweisen? yes
Sie müssen einen Punkt / Punkt in Ihre Klassenanweisungen einfügen
.box1 .box-body i{width: 30px;}
– Paulie_D
28. Mai 2015 um 11:27 Uhr
Sehen Sie sich dieses großartige Tutorial über Selektoren an: code.tutsplus.com/tutorials/…
– dingo_d
28. Mai 2015 um 11:29 Uhr