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。

问题是，它只有在我删除.taglist之前ul和li css，我不想要的工作因为我想要的样式只在标签列表div ..

i'v尝试了每个组合，如.taglist tag_selected，.taglist ul li tg_selected，但没有什么工作！

我能做什么？

btw此行：

 < li class =tag_selectedid =1> 1< / li> 
  

给出了相同的结果，没有什么改变。

提前感谢！

解决方案

您的问题似乎是 CSS选择器专属性

规则 .taglist ul 和 .taglist li 比 .tag_selected 更具体，因此您的类被分配，但后台被 .taglist li 覆盖。 / p>

这应该适用

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

特殊性顺序（最弱到最强）标签，类，要记住计算它的最简单的方法是将每个的和作为数字，标签为1，类为10，ID为100.

• li - 1


• .taglist - 10


• .taglist li - >


• li＃myId - 101


• div.taglist li.tag_selected - 22

查看寻求帮助或Googlecss特异性。

i have this code:

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>

Now I'm using jQuery for this one.. so when an item on the list is selected, it should change its class to tag_selected.

Problem is, it only works if i remove the ".taglist " before the ul and li css, and i don't want to do it because i want the style only to be on the "taglist" div..

i'v tried every combination like ".taglist tag_selected", ".taglist ul li tg_selected", etc. but nothing works !!

what can I do?

btw, trying this line:

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

gave the same result, no change what so ever..

Thanks in advance!

解决方案

Your problem seems to be CSS selector specificity.

The rules .taglist ul and .taglist li are more specific than .tag_selected and therefore your class is assigned but the background is overridden by .taglist li.

This should work

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

The specificity order (weakest to strongest) tag, class, ID. The easiest way to remember to calculated it is treat the sum of each as a digit, with tag as the 1s, class as the 10s, and ID as the 100s.

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

See http://htmldog.com/guides/cssadvanced/specificity/ for help or Google "css specificity".

这篇关于CSS问题 - 一个元素只有当它没有父（使用jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！