п-й ребенок не признается

Кодексп-й ребенок не признается

.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

п-й ребенок не признается

ответ

Смежные вопросы