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;
}

jssery ui自动完成的css格式

1 个答案: