交替<article>的目标子

Question

这更像是一个CSS问题，但是我将在这里添加它，因为任何下划线开发人员都可能遇到过它。我有一个索引页面布局如下：

<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

我想用替换文章的类xyz来锁定div，并将其向右浮动。我尝试了“文章:nth-child(2n+1).xyz”来向它添加一个浮动，但它似乎不起作用。我有什么办法瞄准它吗？

谢谢你的帮助，

Answer 1

您忘记了article:nth-child(2n+1)和.xyz之间的空间。

​

article:nth-of-type(2n+1) .xyz {
  color: red;
}

<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

​

若要从第二个开始进行替换，请使用以下命令：

​

article:nth-of-type(2n) .xyz {
  color: red;
}

<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

​