我如何使用奇数偶伪类作为内部html？

Question

我想更改div.img-box位置，使用下面的代码不起作用。 我该怎么做呢？

<style>
  ul.home-grid-list li:nth-child (odd) div.img-box {float:left;}
  ul.home-grid-list li:nth-child (even) div.img-box {float:right;}
</style>

<ul class="home-grid-list">
            <li>
                <div class="img-box"><img src="images/h-grid-1.jpg"/></div>
                <div class="grid-info">                     
                    <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,</p>
                </div>
            </li>
            <li>
                <div class="img-box"><img src="images/h-grid-2.jpg"/></div>
                <div class="grid-info">
                    <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,</p>
                </div>
            </li>
</ul>

Answer 1

删除nth-child和括号之间的空间。

它应该是：

ul.home-grid-list li:nth-child(odd) div.img-box {float:left;}
ul.home-grid-list li:nth-child(even) div.img-box {float:right;}

在这里工作演示