备用 <article> 的目标 child

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>

我想用备用文章的 class xyz 定位 div 并将其浮动到右侧。我试过 "article:nth-child(2n+1).xyz" 给它添加一个浮动，但它似乎不起作用。有什么方法可以定位它吗？

感谢您的帮助，

Answer 1

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

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>

备用 <article> 的目标 child

Target child of alternate <article>

css

blogs

underscore.js