CSS 我可以使用类定义覆盖 #id ul li 行为吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3238477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I override a #id ul li behaviour with a class definition
提问by thoni56
I have an area that is identified by a #id and there is a CSS like:
我有一个由 #id 标识的区域，并且有一个 CSS，如：
#id ul li {
margin:0;
}
can I, for a specific UL in that area, override the margin-setting? I understand that #id creates very high priority in evaluating the formatting.
对于该区域的特定 UL，我可以覆盖边距设置吗？我知道 #id 在评估格式时创建了非常高的优先级。
I have tried:
我试过了：
.myclass ul li {
margin-left: 20px;
}
and
和
#id ul.myclass {
as well as
也
#id li.myclass {
Is it even possible?
甚至有可能吗？
回答by ScottS
I agree with SWilk, avoid !importantif possible (and it is possible here). Some other solutions that SWilk did not offer is:
我同意 SWilk，!important尽可能避免（这里是可能的）。SWilk 没有提供的其他一些解决方案是：
#id ul.myclass li {
or...
或者...
#id ul li.myclass {
The key is increasing the specificity of the selector, which the above, and SWilk's solutions do. The reason your original solutions did not work is that you did not include the other tag (ulor li) nor the #idwith your addition of the .myclass.
关键是增加选择器的特异性，上面和 SWilk 的解决方案就是这样做的。您的原始解决方案不起作用的原因是您没有包含其他标签（ul或li），也没有#id添加.myclass.
Added after your comment that showed structure:
在显示结构的评论后添加：
If your html is this (as you stated in your comment):
如果您的 html 是这样的（如您在评论中所述）：
<div id="ja-col2">
<div>....
<ul class="latestnews">
<li class="latestnews">
And your current css is (as stated in another comment):
您当前的 css 是（如另一条评论中所述）：
#ja-col1 ul li,
#ja-col2 ul li {
margin:0; padding-left:15px;
}
#ja-col2 .latestnews ul li, /*does not exist*/
.latestnews #ja-col2 ul li, /*does not exist*/
.latestnews ul li, /*does not exist*/
ul.latestnews li.latestnews {
list-style:disc outside url("../images/bullet.gif");
margin-left:15px; padding-left:15px;
}
ul li { line-height:180%; margin-left:30px; }
The reason you are not seeing any change is because three of your selector paths do not exist in your html structure, and the one that wins by specificity is the very first group. You need:
您没有看到任何变化的原因是因为您的 html 结构中不存在三个选择器路径，而通过特异性获胜的是第一组。你需要：
#ja-col2 ul.latestnews li
To override the #ja-col2 ul li.
要覆盖#ja-col2 ul li.
回答by HurnsMobile
.myclass ul li {
margin-left: 20px !important;
}
Should do the trick :)
应该做的伎俩:)
回答by Benn
Use pseudo fake :not ID
使用伪假：不是 ID
.myclass:not(#f) ul li {
margin-left: 20px;
}
#hello .hello-in{
color:red;
}
.hello-in:not(#f){
color:blue;
}<div id="hello">
<div class="hello-in">
Hello I am red
</div>
</div>you can even use :not(#?)or any html4/5 ( depends on page type ) character
您甚至可以使用:not(#?)或任何 html4/5（取决于页面类型）字符
回答by SWilk
Avoid using !important. This is hard to debug and is very probable, that it will interfere with other selectors. Especially if you will try to change css in few months from now, when you will forget there was an !important clause in some place.
避免使用 !important。这很难调试并且很可能会干扰其他选择器。特别是如果您在几个月后尝试更改 css，当您会忘记在某个地方有一个 !important 子句时。
You need to put more specific selector than the previous one. Just use the class and id parts in one selector.
您需要放置比前一个更具体的选择器。只需在一个选择器中使用 class 和 id 部分。
Try using either
尝试使用
#id .myclass ul li {
margin-left: 20px;
}
or
或者
.myclass #id ul li {
margin-left: 20px;
}
depending on where the element with "myclass" class is located in the DOM tree - if it is the parent of the #id element use first example, otherwise the second. If you want to be independent of the #id element, try to use:
取决于具有“myclass”类的元素在 DOM 树中的位置 - 如果它是 #id 元素的父元素，则使用第一个示例，否则使用第二个示例。如果要独立于#id 元素，请尝试使用：
#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
margin-left: 20px;
}
This will work for all li's inside ul inside .myclass element, and it will not matter whether there is any #id element in the tree.
这将适用于 .myclass 元素内 ul 中的所有 li，并且树中是否有任何 #id 元素都无关紧要。
Best regards, SWilk
最好的问候，斯威克
回答by Gavrisimo
http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override
http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override
In order to ensure that users can control styles, CSS2 changes the semantics of the "!important" operator defined in CSS1. In CSS1, authors always had final say over styles. In CSS2, if a user's style sheet contains "!important", it takes precedence over any applicable rule in an author's style sheet. This is an important feature to users who require or must avoid certain color combinations or contrasts, users who require large fonts, etc. For instance, the following rule specifies a large font size for paragraph text and would override an author rule of equal weight:
为了保证用户可以控制样式，CSS2 改变了 CSS1 中定义的“!important”操作符的语义。在 CSS1 中，作者总是对样式有最终决定权。在 CSS2 中，如果用户的样式表包含“!important”，则它优先于作者样式表中的任何适用规则。对于需要或必须避免某些颜色组合或对比度的用户、需要大字体的用户等来说，这是一个重要功能。例如，以下规则为段落文本指定了大字体大小，并将覆盖同等权重的作者规则：
P { font-size: 24pt ! important }
