Select 第二部分同名的第二个元素，CSS - NTH

Question

在这个例子中http://jsfiddle.net/rodrigolinkweb/k8qg14xL/我只需要select“容器12”，我该怎么做？

ps：请注意，两个 div 具有相同的 class 名称“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>

Answer 1

你可以用 .wrapper class 来 select 它们，像这样

.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>

如果你想从后面 select 它，你可以使用 :nth-last-of-type() 。参考以下fiddlehere

无论 .wrapper 有什么内容，:nth-child 都将 select 根据其位置作为 :nth-of-type select 具有适当属性的子项。

.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>

Select 第二部分同名的第二个元素，CSS - NTH

Select the second element of the second section with same name, CSS - NTH

css

inheritance