CSS 问题 - 元素仅在没有父元素时才有效（使用 jquery）

我有这个代码：

CSS:

.taglist 
{
    float:left;
    margin-left:30px;
}
.taglist ul 
{
    overflow:auto;
    list-style-type:none;
    border:1px solid #999;
    background:#ccc;
    padding:20px;
    min-height:150px;
    max-height:150px;
    width:100px;
}

.taglist li
{
    display:block;
    border:1px solid #999;
    background:#fff;
    width:80px;
    padding:5px 10px;
    margin-bottom:5px;
}
.tag_selected {
    background:#ffc;
}

HTML:

<div class="taglist">
    <ul id="list1">
        <li id="1">1</li>
    </ul>
</div>

现在我使用 jQuery 来实现这一点.. 因此，当选择列表中的一项时，它应该将其类更改为 tag_selected。

问题是，只有当我删除 ul 和 li css 之前的“.taglist”时，它才有效，而且我不想这样做，因为我希望样式仅位于“taglist”div 上。

我尝试了诸如“.taglist tag_selected”、“.taglist ul li tg_selected”等每种组合，但没有任何效果！

我能做些什么？

顺便说一句，尝试这一行：

<li class="tag_selected" id="1">1</li>

得到相同的结果，没有任何改变..

提前致谢！

你的问题似乎是CSS 选择器特异性.

规则.taglist ul and .taglist li比更具体.tag_selected因此你的班级被分配但背景被覆盖.taglist li.

这应该有效

.taglist li.tag_selected {
    background:#ffc;
}

特异性顺序（从最弱到最强）标签、类别、ID。记住计算它的最简单方法是将每个数字的总和视为一个数字，其中标记为 1，类别为 10，ID 为 100。

• li - 1
• .taglist - 10
• .taglist li - 11
• li#myId - 101
• div.taglist li.tag_selected - 22

See http://htmldog.com/guides/cssadvanced/speciality/寻求帮助或谷歌“CSS特异性”。