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>

Мне нужно установить поплавок: левый для четных изображений и плавать: право на нечетной. Но в обоих случаях запускается второе css-правило. Помоги мне, пожалуйста.

Answer 1

Вам нужно будет использовать селектор :nth-of-type на теге p.

Проблема заключается в том, что элемент абзаца является непосредственным дочерним элементом 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>

Answer 2

Почему нет:

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

div img:nth-of-type(even) { 
    float: right; 
}