第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

第n個孩子無法識別

回答

相關問題