CSS问题 - 一个元素只有在它没有父元素时才有效（使用jquery）

Question

我有这个代码：

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>

给出了相同的结果，没有任何改变..

提前致谢！

Answer 1

您的问题似乎是 CSS 选择器特异性。

规则.taglist ul 和.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

请参阅 http://htmldog.com/guides/cssadvanced/specificity/ 以获取帮助或 Google “css specificity”。