CSS: изменение ротации на сайте Wordpress?

Question

Я попробовал все виды кодов, но я не могу понять это правильно. Что мне нравится видеть, так это то, что разные записи с миниатюрами имеют разные степени поворота.

Вот код CSS, который я попробовал:

.hentry .post-thumb li:nth-child(2n){
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

.hentry .post-thumb li:nth-child(3n){
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

Вы можете посмотреть сайт здесь .

Спасибо

Answer 1

CSS, указанный в вашем вопросе, не соответствует HTML на сайте, на который вы ссылаетесь. Нет li потомка элемента .post-thumb.

Я думаю, вы неправильно понимаете, как работает nth-child() псевдокласс . Вы должны делать что-то вроде этого:

.hentry:nth-child(2n) .post-thumb img { transform: rotate(3deg); /* etc. */ }
.hentry:nth-child(3n) .post-thumb img { transform: rotate(-3deg); /* etc. */ }

Это будет вращать миниатюры каждого второго поста на 3 градуса вправо (т.е. 2-го, 4-го, 6-го и т. Д. Дочернего элемента .posts div) и все миниатюры каждого третьего поста на 3 градуса влево (т.е. 3-й, 6-й, 9-й и т. д. ребенок .posts div).

Я не уверен, что 2n и 3n вполне то выражение, которое вы намереваетесь, хотя. Возможно Sitepoint «Понимание: выражения псевдокласса nth-child» поможет.