CSS问题与(ODD)选择器

Question

我正在尝试创建一个循环，在其中我将不同的样式应用于每个奇数元素。因此，使用：nth-child(odd)将非常好。然而，由于一些我不理解的原因，：第n个子(奇数)被应用于每个元素，而不仅仅是奇数元素。

我创建了一个代码笔来展示这个问题。

h3.post-title a:nth-child(odd) {
font-weight: bold;
}

<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#"></a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>

https://codepen.io/Pbalazs89/pen/eYjZNya

我尝试直接选择元素(h3.title a:nth child(odd)｛｝)，也尝试选择它们的父容器(.ts-rid-item-2 h3.title-a:nh child(奇数)｛})容器中不存在父容器，我只想列出我尝试的内容。

Answer 1

使用实际选择器，您可以针对h3 title内部的每个a。您必须针对奇数元素容器中的每个a。

div.item:nth-child(odd) h3.post-title a {}

使用此选择器，您可以将a元素定位在h3中，类.post-title位于任何具有类.item的奇数div中

div.item:nth-child(odd) h3.post-title a {
font-weight: bold;
color:red;
}

<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#"></a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>

</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
<a href="#">Title</a>
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>