css - 备用 <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 并将其 float 到右侧。我试过“article:nth-child(2n+1).xyz”给它添加一个 float ，但它似乎不起作用。有什么方法可以定位它吗？

感谢您的帮助，

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>