如果您使用Firebug或Chrome开发工具检查标题元素“理查德”,您应该按以下顺序查看这些规则：

/**************************/
/* /hXPk7/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/********************************************************/
/* /hXPk7/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

请注意,这不是它们在CSS样式表中出现的顺序 – 而是按照它们的特异性降序排列.首先列出优先级,其他(其规则被更具体的规则覆盖)可能具有划掉的属性.这表明特殊性可以很容易地跟踪(调试？)元素从哪里获取其CSS属性.

现在,与this JS fiddle进行比较 – 实际上是相同的,但是现在使用了一条新规则！important：http://jsfiddle.net/hXPk7/1/

使用Firebug或Chrome开发工具检查相同的元素,您将看到如下内容：

/**************************/
/* /hXPk7/1/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/**************************/
/* /hXPk7/1/show/ (line 26) */
/**************************/
span {
    color: black !important;
}

/********************************************************/
/* /hXPk7/1/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

同样,规则是根据它们的特殊性排序的 – 但请注意,这次,虽然最先列出的最具体的规则指定了黄色,但浏览器却将文本呈现为黑色！这是因为！important声明打破了特异性的正常行为,优先采用可能难以追踪的方式.想象一个更现实的网站,可能有数百条规则,控制颜色的网站并不容易找到或改变.

现在,也许这是开发人员工具的一个问题,但我认为它反映了这样一个事实：重要的是需要一个通常易于预测的优先系统并使其更具挑战性.也许有时候使用它,但它不应该是你编写CSS时的第一个工具.

在reset.css中,发生以下样式定义：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  border-bottom-width:0;
  border-color:initial;
  border-left-width:0;
  border-right-width:0;
  border-style:initial;
  border-top-width:0;
  font-family:inherit;
  font-size:100%;
  font-style:inherit;
  font-weight:inherit;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  outline-color:initial;
  outline-style:initial;
  outline-width:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  vertical-align:baseline;
}

您可以看到该范围位于此列表中,默认情况下,字体大小为100％.

在我的screen.css中,我有以下内容：

dl.labels-left dt span.req {
  display:inline;
  font-size:14px !important;
}

我的HTML有以下摘录：

<div>
    <dl>
        <dt>
            <label>Name:</label>
            <span>*</span>
        </dt>
...

我遇到的问题是font-size：14px！important;被重置文件中的CSS覆盖,但仅限于谷歌浏览器.我无法理解为什么！

这是一个Firebug Lite截图,显示了划掉的字体大小：
Firebug Screenshot http://www.damianbrady.com.au/images/firebug_screenshot.png

为什么我的reset.css样式被认为比特定的类定义更重要？

根据我对W3C CSS 2.1 Specificity的理解,这不应该发生！

例如：

@fontColor: #000000 !important;

p {
    color: @fontColor;
}

应呈现为：

p {
    color: #000000 !important;
}

我知道有一种逃避的方法,提到HERE,使用以下内容：

@fontColor: #000000 ~'!important';

很久以前有人谈到将它作为简单的语法实现,就像我的第一个例子一样,只是不确定它们是否曾经 – https://github.com/less/less.js/issues/1401

使用Visual Studio 2013(更新4)

因此,以下代码似乎是正确的(对我来说)

@fontColor: "#000000 !important";

p {
    color: ~"@{fontColor}";
}

我还发现了以下代码：

@wrong: red noncolor;
selector {
property: @wrong;
}

@wrongtoo: red !important;
selector {
propertytoo: @wrongtoo;
}

输出：

selector {
  property: red noncolor;
}
selector {
  propertytoo: red;
}

编译器(Less v2)在两种情况下都不会抛出错误.但在第二种情况下！重要的是没有在CSS代码中编译.也是红色！noncolor编译成CSS代码.可能！重要的是某种关键字,但对我而言,现在似乎是inconsequence in the compiler.

另请注意,文档描述了如何使用！important与mixins在http://lesscss.org/features/#mixins-feature-the-important-keyword

@include linear-gradient(hsl(68%,94%,90%),hsl(68%,90%,80%)); !important

@include linear-gradient(hsl(68%,80%)) !important;

有没有办法正确地做到这一点？

它最终会给你一个SASS语法错误.

见this question for more information