CSS :nth-child(odd)选择器异常求助：所有元素均被选中

你遇到的问题核心是对:nth-child(odd)的作用逻辑理解有误——这个选择器是相对于元素的直接父元素来计算位置的。你写的h3.post-title a:nth-child(odd)，每个a都是它的父元素h3.post-title的唯一子元素，所以每个a都属于父元素的第1个（奇数）子元素，自然会被全部选中。

正确的写法 #

你需要把选择器的层级往上移，针对包含所有.post-title的父容器，选中其中奇数位置的.post-title，再定位到里面的a标签。假设你的结构是类似这样的：

<div class="posts-container">
  <h3 class="post-title"><a href="#">标题1</a></h3>
  <h3 class="post-title"><a href="#">标题2</a></h3>
  <h3 class="post-title"><a href="#">标题3</a></h3>
</div>

对应的CSS应该写成：

.posts-container .post-title:nth-child(odd) a {
  /* 你的样式 */
  color: red;
}

这样就能精准选中父容器里奇数位置的标题下的链接了。

内容的提问来源于stack exchange，提问作者Pbalazs89