jQuery UI自動完成的css格式

Question

我有一個基於網絡的國際象棋比賽手冊配對工具。我需要格式化jquery ui自動完成，使白色玩家選擇菜單項左對齊，黑人選擇菜單項右對齊。這裏是鏈接：http://communitychessclub.com/test.php

我見過很多令人困惑和可能矛盾的CSS造型方法。例如：

ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; text-align:center; letter-spacing:2px;} 

.ui-widget-content.ui-menu .ui-menu-item {color: red; font-weight: bold;} 
.ui-widget-content.ui-menu .ui-menu-item {color: tan; font-weight: bold;} 

的HTML：

<div class = "ui-widget white"><input type = "text" class = "automplete-2"></div> 
<div class = "ui-widget black"><input type = "text" class = "automplete-2"></div><br /> 

我怎麼能有上市左對齊的白人球員的自動完成和黑人球員的自動完成上市右對齊。

Answer 1

嘗試nth-of-type CSS選擇器的偶/奇的說法：

.ui-menu:nth-of-type(even) li div{ /* black */ 
    text-align: left !important; 
} 
.ui-menu:nth-of-type(odd) li div{ /* white */ 
    text-align: right !important; 
}