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：

 
 
 
1
 
  

现在我正在使用jQuery …所以当选择列表中的项目时，它应该将其类更改为tag_selected。

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

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

我能做什么？

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

 
1 

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

提前致谢！

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

有关帮助或Google“css特异性”，请参见http://htmldog.com/guides/cssadvanced/specificity/ 。