html - nth-of-type 无法正常工作

Question

我有以下代码。

div img:nth-of-type(2n) {
    float: left;
}

div img:nth-of-type(2n+1) {
    float: right;
}

<div>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  <p>Some random text.</p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  <p>Some random text.</p>
</div>

我需要为偶数图像设置 float:left，为奇数图像设置 float:right。但在这两种情况下，都会触发第二个 css 规则。请帮助我。

Answer 1

您需要在 p 标签上使用 :nth-of-type 选择器。

这里的问题是段落元素是 div 的直接子元素。图像嵌套在段落标记内，而不是 div 的直接子级。所以它不会以 div 作为它的父级。

---

问题的 v1

div p:nth-of-type(2n) img { /* Select all even */
  float: left;
}
div p:nth-of-type(2n+1) img { /* Select all odd */
  float: right;
}

<div>
  <p>...</p>
  ...
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  ...
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  ...
  <p>
    <img src="http://placehold.it/20x20">
  </p>
  ...
</div>

---

问题的 v2

div p:nth-of-type(4n+2) img { /* Select 2,6,10 */
  float: left;
}
div p:nth-of-type(4n) img { /* Select 4,8 */
  float: right;
}

<div>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="1">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="2">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="3">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="1">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="2">
  </p>
  <p>Some random text.</p>
  <p>
    <img src="http://placehold.it/20x20" alt="3">
  </p>
  <p>Some random text.</p>
</div>