n番目の子は、

認識されていないコードn番目の子は、

.inner-image:nth-child(2) { 
    background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400'); 
}

を認識していないと私は理由を知りません。私はFirebugで一見して、二番目の子はリストされていません。私は単にあなたが上記のリンクに提供されている画像に背景を設定したいだけです。

ここに完全なソースコードがあります。

CSS

.inner { 
    background-color: #000; 
    height: 100%; 
    padding: 35px; 
    text-align: justify; 
    width: 100%; 
    color: #fff; 
} 
.inner-video, 
.inner-image { 
    padding: 0px; 
} 
.inner-image { 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
.inner-image:nth-child(2) { 
    background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400'); 
} 
.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
} 
.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
}

HTML

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <div class="inner"> 
         This is a Test! 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="inner inner-image"> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="inner inner-image"> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="inner inner-video"> 
         <iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="inner"> 
         This is a Test! 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-09-19 user3877230

.inner-画像のない兄弟が存在しないので、それが機能していない理由があります。それはそれ自身のdivに含まれています。解決策は次のようになります。

<div class="image-container col-md-4"> 
     <div class="inner inner-image"> 
     </div> 
</div> 

<div class="image-container col-md-4"> 
     <div class="inner inner-image"> 
     </div> 
</div>

CSS：

.image-container:nth-child(2) .inner-image{...}

出典

2016-09-19 04:31:54 Passersby

大変ありがとうございます。 – user3877230

あなたは間違ったクラスを選択しています。 :nth-child(2)は、常に唯一の子であるため、.inner-imageでは選択されません。 .image-containerを選択してください。 :nth-childはその子ではなく、その子を指します。

.image-container:nth-child(2) .inner-image { 
    /* styles here */ 
}

出典

2016-09-19 04:35:33 dork

答えて

関連する問題