nth-child selector не работает с темой Wordpress

Моя цель состоит в том, чтобы каждый из ящиков (которые являются ярлыками на живом сайте) имеют другой цветной фон. Поскольку это сайт Wordpress, я не могу войти и дать каждому окну другой идентификатор, поэтому я бы хотел использовать селектор nth-child().nth-child selector не работает с темой Wordpress

Я пытался выбрать контейнер DIV и первый ящик внутри этого контейнера с

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea { 
    background-color:#555; 
}

Но это ничего не делает.

Here's a fiddle.

HTML:

<div class="row multi-columns-row kwayy-items-wrapper"> 
    <div class= 
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12"> 
     <div class="kwayy-testimonial-data"> 
      <blockquote class="kwayy-testimonial-text"> 
       <div class="contarea"> 
        <div class="kwayy-tst-contarea-text"> 
         <h2 style="text-align: center;">one</h2> 

         <h4>first box</h4>Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit. 
        </div> 
       </div> 

       <footer> 
        <span class= 
        "kwayy-testimonial-icon kwicon-fa-quote-left" style= 
        "font-style: italic"></span> <cite class= 
        "kwayy-testimonial-title"></cite> 
       </footer> 
      </blockquote> 
     </div> 
    </div> 

    <div class= 
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12"> 
     <div class="kwayy-testimonial-data"> 
      <blockquote class="kwayy-testimonial-text"> 
       <div class="contarea"> 
        <div class="kwayy-tst-contarea-text"> 
         <h2 style="text-align: center;">two</h2> 

         <h4>second box</h4>Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit. 
        </div> 
       </div> 

       <footer> 
        <span class= 
        "kwayy-testimonial-icon kwicon-fa-quote-left" style= 
        "font-style: italic"></span> <cite class= 
        "kwayy-testimonial-title"></cite> 
       </footer> 
      </blockquote> 
     </div> 
    </div> 

    <div class= 
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12"> 
     <div class="kwayy-testimonial-data"> 
      <blockquote class="kwayy-testimonial-text"> 
       <div class="contarea"> 
        <div class="kwayy-tst-contarea-text"> 
         <h2 style="text-align: center;">three</h2> 

         <h4>third box</h4>Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit. 
        </div> 
       </div> 

       <footer> 
        <span class= 
        "kwayy-testimonial-icon kwicon-fa-quote-left" style= 
        "font-style: italic"></span> <cite class= 
        "kwayy-testimonial-title"></cite> 
       </footer> 
      </blockquote> 
     </div> 
    </div> 
</div>

CSS:

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea { 
background-color:#555;

}

Спасибо.

источник

2015-03-12 redleaf

Если вы удалите 'nth-child', вы увидите, что ваш селектор по-прежнему не соответствует ни одному. Проблема не в 'nth-child', а в остальной части селектора css. –

Вы ищете п-го ребенка .kwayy-testimonial-box

.kwayy-testimonial-box:nth-child(1) .contarea { 
    background-color:#555; 
}

Demo

или по крайней мере что-то вроде этого

.row.multi-columns-row.kwayy-items-wrapper .kwayy-testimonial-box:nth-child(1) .contarea { 
    background-color:#555; 
}

Вы должны сделать multiple select

You также имеют проблемы в селе т е р. Вы забыли классный селектор .

источник

2015-03-12 16:59:37 Dhiraj

Отлично, спасибо! Я выбрал классы, поскольку они были указаны в инспекторе для этих элементов, но похоже, что это ни в коем случае не является доказательством дурака. – redleaf

У вас есть ошибка при определении ваших селекторов. Оно должно быть достаточно:

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1) .contarea { 
    background-color:#555; 
}

Проверить fiddle

источник

2015-03-12 17:00:05

Классы multi-columns-row и kwayy-items-wrapper применяются к одному элементу.

Вам также не хватает . в вашем CSS для этих классов.

Изменение:

.row multi-columns-row kwayy-items-wrapper:nth-child(1)

To:

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1)

Это еще плохое формирование селектора, но он будет работать так, как вы собираетесь его.

источник

2015-03-12 17:00:25

nth-child selector не работает с темой Wordpress

ответ

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