css - 如何为内部 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;}

Working DEMO here