CSSでクラスにアクセスするには？

クラス<div>で、クラス.mineとでアクセスしたい場合は、background: blueにします。
どうすればいいですか？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;  
}

出典

2016-12-12 Raheel Asad

そうしない理由あなたの '.mine' divの高さは0です（これは' .navbar-nav'が浮動するためです）。あなたのセレクタは良いですが、変更を見るために、幅と高さのディメンション（例えば '.navbar-nav' div）で何かをターゲットにしなければなりません。まずHTMLとCSSの基礎を学ぶべきです。ウェブ上には多くのリソースがあります。 – makshh

あなたのガイダンスのためのmakshに感謝しますが、私はそれを聞いたことがあるdivの中の任意のコンテンツをラップするたびにdivは自動的にその内容に応じてその高さを調整します.mineクラスはul要素をラップしているので、なぜ浮動しているのではなく、内容に応じて私はフロートプロパティを使用していないのですか？ plz guide me –

独自のCSSを持つブートストラップを使用しています。あなたはBootstrapクラスである '.pull-right'を使い、そのdivに' float：right'を適用します。その浮動小数点型のdivを 'mine' divにラップするとき、浮動小数点がクリアされないので、浮動小数点型のdivは0の高さになります（https://css-tricks.com/all-about-floats/#article-header-idで詳しく読むことができます）。 -2）。 HTML/CSSを学んでいるのであれば、ブートストラップを使用せず、最初からあなたのウェブサイトを作成することをお勧めします。その方法でもっと学ぶことができます。基本を知っていれば、ブートストラップをCSSフレームワークとして利用することができます。 – makshh

あなたはTwitterのブートストラップを使用している場合は、多分あなたのCSSが重要なこの場合の使用において重複することができます！

出典

2016-12-12 17:10:15

これは、クラスmineのdivが高さがないために発生しています。それは内容があなたのCSSにこれを追加

それから流出されています：

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

.mine:after { 
    clear: both; 
}

をそして、あなたのページは次のようになります：

.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>

出典

2016-12-12 17:17:52

CSSでクラスにアクセスするには？

答えて

関連する問題