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并将其浮动到右边。我试过＆＃34;文章：nth-child（2n + 1）.xyz＆＃34;向它添加一个浮动，但它似乎不起作用。有什么方法可以针对它吗？

感谢您的帮助，

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>

目标替代<article>的孩子

1 个答案: