Блог

В этом примере http://jsfiddle.net/rodrigolinkweb/k8qg14xL / Мне нужно выбрать только «Контейнер 12», как я могу это сделать?

ps: обратите внимание, что оба divs имеют одинаковое имя класса «wrapper».

 .container:nth-child(n 3){
   background-color: gray;
    color:white;
}
 

 <div class="wrapper">
    <div class="container">Container 1</div>
    <div class="container">Container 2</div>
    <div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
    <div class="container">Container 11</div>
    <div class="container">Container 12</div>
    <div class="container">Container 13</div>
</div>
 

Вы можете выбрать их с .wrapper помощью класса, например

 .wrapper:nth-of-type(2) .container:nth-child(2){
   background-color: gray;
    color:white;
} 

 <div class="wrapper">
    <div class="container">Container 1</div>
    <div class="container">Container 2</div>
    <div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
    <div class="container">Container 11</div>
    <div class="container">Container 12</div>
    <div class="container">Container 13</div>
</div> 

Если вы хотите выбрать его в обратном порядке, вы можете использовать:nth-last-of-type() . Обратитесь к следующей скрипке здесь

Независимо от того, какой контент .wrapper имеет :nth-child , он выберет дочерний элемент на основе его позиции, где as :nth-of-type выбирает с соответствующим атрибутом.

 .wrapper:nth-of-type(2) .container:nth-child(2){
   background-color: gray;
    color:white;
} 

 <div class="wrapper">
    <div class="container">Container 1</div>
    <div class="container">Container 2</div>
    <div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<a href="#">Some link</a>
    <div class="container">Container 12</div>
    <div class="container">Container 13</div>
</div>