Question

我有一个由#id标识的区域，并且有一个像：

这样的CSS

#id ul li {
    margin:0;
}

对于该区域的特定UL，我可以覆盖边距设置吗？我知道#id在评估格式时会产生非常高的优先级。

我试过了：

.myclass ul li {
    margin-left: 20px;
}

和

#id ul.myclass {

以及

#id li.myclass {

甚至可能吗？

Answer 1

我同意SWilk，如果可能请避免!important（这里有可能）。 SWilk没有提供的其他一些解决方案是：

#id ul.myclass li {

...或

#id ul li.myclass {

关键是增加选择器的特异性，以及上述SWilk的解决方案。原始解决方案不起作用的原因是您添加了ul时未添加其他标记（li或#id）或.myclass。

在显示结构的评论后添加：

如果您的html是这样（正如您在评论中所述）：

<div id="ja-col2">
  <div>.... 
    <ul class="latestnews">
      <li class="latestnews">

你现在的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; }

您没有看到任何更改的原因是因为您的html结构中不存在三个选择器路径，并且通过特异性获胜的那个是第一个组。你需要：

#ja-col2 ul.latestnews li

覆盖#ja-col2 ul li。

Answer 2

.myclass ul li {
    margin-left: 20px !important;
}

应该做的伎俩：）

Answer 3

避免使用！important 。这很难调试，很可能会干扰其他选择器。特别是如果你想在几个月内尝试改变css，那时你会忘记某个地方有一个！important子句。

您需要放置比前一个更具体的选择器。只需在一个选择器中使用class和id部分。

尝试使用

#id .myclass ul li {
    margin-left: 20px;
}

或

.myclass #id  ul li {
    margin-left: 20px;
}

取决于具有“myclass”类的元素在DOM树中的位置 - 如果它是#id元素的父元素，则使用第一个示例，否则使用第二个示例。如果您想独立于#id元素，请尝试使用：

#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
    margin-left: 20px;
}

这将适用于.myclass元素内的所有li里面的元素，树中是否有#id元素无关紧要。

祝你好运， SWilk

Answer 4

http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override

为了确保用户可以控制样式，CSS2更改了CSS1中定义的“！important”运算符的语义。在CSS1中，作者总是对样式有最终决定权。在CSS2中，如果用户的样式表包含“！important”，则它优先于作者样式表中的任何适用规则。对于需要或必须避免某些颜色组合或对比的用户，需要大字体的用户等，这是一项重要功能。例如，以下规则为段落文本指定了较大的字体大小，并将覆盖相同权重的作者规则：

P { font-size: 24pt ! important }

Answer 5

使用伪假：不是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>

你甚至可以使用:not(#♥)或任何html4 / 5（取决于页面类型）字符

我可以使用类定义覆盖#id ul li行为

5 个答案: