Zugriff auf eine Klasse in CSS?

Ich möchte in der Klasse <div> mit Klasse .mine und zugreifen, es ist background: blue.
Wie kann ich das tun?Zugriff auf eine Klasse in CSS?

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <h2>Meet Mome&#771;nto.</h2> 
    </div> 
    <div class="col-sm-8 my_menu"> 
     <nav class="navbar navbar-default"> 
     <!-- for collapsible button making --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> 
      <!-- for making icon bar --> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <!-- in order to collapse we will wrap ul in to div tag--> 
     <div class="mine"> 
      <ul class="nav navbar-nav pull-right"> 
      <li class="active"> <a href="#">Home</a></li> 
      <li> <a href="#">Slider</a></li> 
      <li> <a href="#">Portfolio</a></li> 
      <li> <a href="#">Pages</a></li> 
      <li> <a href="#">Blog</a></li> 
      <li> <a href="#">Shortcut</a></li> 
      </ul> 
     </div> 
     </nav> 
    </div> 
    </div> 
</div>

CSS:

.container .row .my_menu .navbar-default .mine{ 
    background:blue;  
}

Quelle

2016-12-12 Raheel Asad

Der Grund, warum Sie nicht tun se blauen Hintergrund ist, dass dein '.mine' div 0 Höhe hat (weil '.navbar-nav' floated ist). Ihr Selektor ist gut, aber um die Änderungen zu sehen, müssen Sie etwas mit Breiten- und Höhendimensionen anvisieren (zum Beispiel '.navbar-nav' div). Sie sollten zuerst die Grundlagen von HTML und CSS lernen. Es gibt viele Ressourcen im Internet. – makshh

danke maksh für Ihre Anleitung, aber ich verstehe es nicht Ich habe gehört, dass jedes Mal, wenn Sie einen Inhalt innerhalb div dann div wird automatisch seine Höhe entsprechend seinem Inhalt in diesem Fall .mine Klasse wickeln ul Elemente, so sollte es Höhe anpassen nach Inhalt, wenn nicht, warum es floating ich habe Float-Eigenschaft nicht verwendet? plz guide mich –

Sie verwenden Bootstrap, die ein eigenes CSS hat. Sie verwenden '.pull-right', das ist eine Bootstrap-Klasse und gilt für dieses div' float: right'. Wenn du das floated div mit deinem 'mine'-div umwickelst, hat es 0 height, weil float nicht gelöscht wird (du kannst hier mehr lesen https://css-tricks.com/all-about-floats/#article-header-id) -2). Wenn Sie HTML/CSS lernen, empfehle ich Ihnen, Bootstrap nicht zu verwenden und Ihre Website von Grund auf neu zu erstellen. Sie werden mit diesem Ansatz mehr lernen, und wenn Sie die Grundlagen kennen, können Sie springen und Bootstrap als Ihr CSS-Framework verwenden. – makshh

Wenn Sie Twitter Bootstrap verwenden vielleicht Ihre CSS wichtig, in diesem Fall den Einsatz überlappen können!

.container, .menu, .row { background: blue important! };

Quelle

2016-12-12 17:10:15

Dies passiert, weil Ihr div mit Klasse meins keine Höhe hat. Es Inhalte fließen aus ihm heraus

Fügen Sie diese auf Ihrem CSS:

.mine{ 
    background:blue; 
    *zoom: 1; 
} 
.mine:before,.mine:after { 
    content: " "; 
    display: table; 
} 

.mine:after { 
    clear: both; 
}

Und Ihre Seite wird so geworden:

.mine{ 
 
    background:blue; 
 
    *zoom: 1; 
 
} 
 
.mine:before,.mine:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.mine:after { 
 
    clear: both; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <h2>Meet Mome&#771;nto.</h2> 
 
    </div> 
 
    <div class="col-sm-8 my_menu"> 
 
     <nav class="navbar navbar-default"> 
 
     <!-- for collapsible button making --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> 
 
      <!-- for making icon bar --> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <!-- in order to collapse we will wrap ul in to div tag--> 
 
     <div class="mine"> 
 
      <ul class="nav navbar-nav pull-right"> 
 
      <li class="active"> <a href="#">Home</a></li> 
 
      <li> <a href="#">Slider</a></li> 
 
      <li> <a href="#">Portfolio</a></li> 
 
      <li> <a href="#">Pages</a></li> 
 
      <li> <a href="#">Blog</a></li> 
 
      <li> <a href="#">Shortcut</a></li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-12-12 17:17:52

Zugriff auf eine Klasse in CSS?

Antwort

Verwandte Themen