Указатель для CSS-селектора для нескольких элементов

Question

У меня есть следующий код. Как вы можете видеть, все мои элементы div имеют одинаковые class name. Я хочу выбрать третий элемент div с помощью CSS-селектора. Я не мог найти никакого способа. nth-child(n) используется для подэлемента (дочерний элемент). Есть идеи?

<div class="linkDisplayStyle"> <a href="#1"> </div> 
<div class="linkDisplayStyle"> <a href="#2"> </div> 
<div class="linkDisplayStyle"> <a href="#3"> </div> 
<div class="linkDisplayStyle"> <a href="#4"> </div> 
<div class="linkDisplayStyle"> <a href="#5"> </div> 
<div class="linkDisplayStyle"> <a href="#6"> </div> 

Answer 1

nth-child работает, если вы ищете дочерний элемент под родительским узлом. Для того, чтобы показать вам пример, который я придумал следующий

.parent>div:nth-child(3) 

Html

<div class="parent"> 
    <div class="linkDisplayStyle"> <a href="#1"> </div> 
    <div class="linkDisplayStyle"> <a href="#2"> </div> 
    <div class="linkDisplayStyle"> <a href="#3"> </div> 
    <div class="linkDisplayStyle"> <a href="#4"> </div> 
    <div class="linkDisplayStyle"> <a href="#5"> </div> 
    <div class="linkDisplayStyle"> <a href="#6"> </div> 
</div> 

Answer 2

Вы можете использовать nth-child(3) для выбора 3-й элемент. Вы также можете использовать nth-of-type(3).

.linkDisplayStyle { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background: red; 
 
    float: left; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-size: 25px; 
 
} 
 
.linkDisplayStyle:nth-of-type(3) { 
 
    background: green; 
 
} 
 
.linkDisplayStyle a { 
 
    color: white; 
 
    text-decoration: none; 
 
}

<div class="linkDisplayStyle"> 
 
    <a href="#1">1</a> 
 
</div> 
 
<div class="linkDisplayStyle"> 
 
    <a href="#2">2</a> 
 
</div> 
 
<div class="linkDisplayStyle"> 
 
    <a href="#3">3</a> 
 
</div> 
 
<div class="linkDisplayStyle"> 
 
    <a href="#4">4</a> 
 
</div> 
 
<div class="linkDisplayStyle"> 
 
    <a href="#5">5</a> 
 
</div> 
 
<div class="linkDisplayStyle"> 
 
    <a href="#6">6</a> 
 
</div>