Javascript 如何使用CSS3动态创建jQueryUI元素？

我真的不知道如何解释这一点，但我想对动态创建的jqueryui按钮应用不同的颜色样式。我认为

：第n个孩子（x）

或第n个类型（x）会有所帮助，但两者都还没有起作用。我是把它们放在正确的顺序上，还是有其他的东西可以帮助我

我的JS:

var listContent = '<div id="PlayerPicker">';
$(xml).find('Character').each(function () {
listContent += '<input type="radio" id="RB_' + $(this).attr('First') +
    $(this).attr('Last') + '" name="player" class="ui-button-text"
    style="background-color: transparent;"><label for="RB_' +
    $(this).attr('First') + $(this).attr('Last') + '">' + $(this).attr('Title')
    + ' ' + $(this).attr('First') + ' ' + $(this).attr('Middle').charAt(0) + '.
    ' + $(this).attr('Last') + '</label>';
});
listContent += '</div>';
$('#Wrapper').html(listContent);
$('#PlayerPicker').buttonset();

#PlayerPicker .ui-button-text {
    background: #ff3d3d;
    background: -moz-linear-gradient(top, hsl(240,100%,62%) 1%, hsl(240,100%,15%) 48%, hsl(240,100%,62%) 49%, hsl(240,100%,15%) 68%, hsl(240,100%,50%) 95%, hsl(240,97%,24%) 100%);
    background: -webkit-linear-gradient(top, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%);
    background: linear-gradient(to bottom, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0 );
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
    border-radius: 99px;
    font-size: 14pt;
}

#PlayerPicker:nth-child(2) .ui-button-text {
    background: #ff3d3d;
    background: -moz-linear-gradient(top, hsl(330,100%,62%) 1%, hsl(330,100%,15%) 48%, hsl(330,100%,62%) 49%, hsl(330,100%,15%) 68%, hsl(330,100%,50%) 95%, hsl(330,97%,24%) 100%);
    background: -webkit-linear-gradient(top, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%);
    background: linear-gradient(to bottom, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0 );
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
    border-radius: 99px;
}

---

更新：，@jmargolisvt。JS已经简化，但是CSS是相同的。

检查您用JavaScript创建的HTML，您可以看到您需要在标签标签上设置样式

#PlayerPicker .ui-button-text label {...} and
#PlayerPicker .ui-button-text:checked label {...}

---

检查用JavaScript创建的HTML，您会发现需要在标签标签上设置样式

#PlayerPicker .ui-button-text label {...} and
#PlayerPicker .ui-button-text:checked label {...}

---

请提供一份到目前为止的工作。您是否尝试过

#PlayerPicker.ui按钮文本：第n个孩子（2）

，而不是

#PlayerPicker:n个孩子（2）.ui按钮文本

？@nnnn是的。多次。这没什么区别。请提供一份到目前为止你所得到的成果。你是否尝试过

#PlayerPicker.ui按钮文本：第n个孩子（2）

，而不是

#PlayerPicker:n个孩子（2）。ui按钮文本

？@nnnnnn是的。多次。这没什么区别，我在小提琴上试过了；它会将按钮重置为其默认主题。我认为这是因为

.ui按钮文本

已经处理了标签。不过，谢谢你的建议。我在小提琴上试过了；它会将按钮重置为其默认主题。我认为这是因为

.ui按钮文本

已经处理了标签。不过，谢谢你的建议。