Wie kann man mit CSS auf verschachtelte Klassen verweisen?

Lesezeit: 3 Minuten

Benutzeravatar von Simon
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>

  • 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

Benutzeravatar des freundlichen Gauners
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.

1445290cookie-checkWie kann man mit CSS auf verschachtelte Klassen verweisen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy