我如何使用odd甚至僞類作爲內部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