GVKun编程网logo

我应该避免在CSS中使用！important吗？

25

关于我应该避免在CSS中使用！important吗？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于css–为什么不鼓励使用`！important`？、css–如何使用LESS将变量声明为

关于我应该避免在CSS中使用！important吗？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于css – 为什么不鼓励使用`！important`？、css – 如何使用LESS将变量声明为！important？、css – 理解特异性：在不使用！important 的情况下实现所需的选择器结果、CSS 之！important_html/css_WEB-ITnose等相关知识的信息别忘了在本站进行查找喔。

本文目录一览：

我应该避免在CSS中使用！important吗？

我应该避免在CSS中使用！important吗？

有时!important是有用的，例如，如果我为网站上的所有链接（例如选择器a）定义了通用样式，但是当我要覆盖某些规则时，可以有以下选择：

  • 使用更具体（更长）的选择器
  • 采用 !important

哪种方法更好，可能有一些指导原则？

答案1

小编典典

使用!important非常，非常谨慎-
它会覆盖刚才的一切，甚至是内联样式和混乱在低于显而易见的方式与样式规则“梯级”，让CSS的名字。它很容易使用不当，而且容易成倍增加，尤其是在滥用时。您可以轻松地!important得出一个带有要覆盖的规则的元素，这时您通常不得不重构样式，或使用另一个!important规则来加剧问题。

一旦它散布并且可以在任何地方使用它，您将回到没有它的情况下（很难指定足够具体的元素来覆盖其他样式），但是您也没有更多的!important原因了其他所有东西也在使用它。

面对!important看起来很有吸引力的情况-或更糟的是，它已经在使用和传播了-
如果可以的话，宁愿重构CSS。（坦白说，如果您需要!important用户样式表之外的内容，通常是因为选择器已经太具体了，和/或您没有利用CSS中的C。）最好定义基本样式尽可能靠近html或body元素，并且要覆盖时，请尽量避免使用特殊性。这样，您就有足够的空间进行更改。通常，您有一个要覆盖样式的原因，这些情况经常可以归结为类名，页面的特定部分（请参阅：特定的父元素）等。

（唯一真正想到的例外是，您要覆盖的样式是否确实超出了您的控制范围。（例如，如果您使用的框架对页面的外观有很强的见解，那么您可能会发现它很烦人。很难覆盖任何东西。我使用的是实际上插入了自己的内联样式的应用程序，其中只有一条!important规则可以覆盖它们。）如果您没有对代码的完全访问权限，则覆盖和重构很容易比它们是值得的。!important只要您知道后果，就可以用来收回一些控制权。）

css – 为什么不鼓励使用`！important`？

css – 为什么不鼓励使用`！important`？

标记为 css的几个答案不鼓励使用！important有利于特异性.为什么？

解决方法

您可以使用实际数学来预测,控制和反向设计CSS规则的影响.通过使用！important,你打破了它.以 this JS fiddle为例,它不使用！important： http://jsfiddle.net/hXPk7/

如果您使用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时的第一个工具.

css – 如何使用LESS将变量声明为！important？

css – 如何使用LESS将变量声明为！important？

是否可以使用LESS将变量声明为！important？目前,我收到以下语法错误.

例如：

@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;确实没有意义,你指定什么？一个字符串,一个列表的东西？
最合理的是一个字符串,在使用时应引用并确实转义：

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

@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

css – 理解特异性：在不使用！important 的情况下实现所需的选择器结果

css – 理解特异性：在不使用！important 的情况下实现所需的选择器结果

参见英文答案 > Points in CSS specificity                                    7个
我试图理解CSS中的特异性.

我目前的理解是特异性与遗传非常相似,但在某种程度上更具体地定义.

Mozilla Specificity Definition：

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and,therefore,will be applied. Specificity is based on the matching rules which are composed of CSS selectors of different sorts.

目前的任务是：

重构.active a和.copyright的CSS声明,以便可以删除！important规则.

CSS：

.main li a {
  color: #7ab2c1;
}
.active a {
  color: #826c55 !important;
}
.primary p {
  font-size: 12px;
}
.copyright {
  font-size: 10px !important;
}

和相关的HTML：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

[...]

<footer>
      <p><a href="#">Sign up</a> for our newsletter,it's a racket!</p>
      <phttps://www.jb51.cc/tag/cop/" target="_blank">copyright">copyright &copy; sven's SNowshoe Emporium. All Rights Reserved.</p>
</footer>

任何人都可以指导我完成重构过程,以帮助我掌握基本概念吗？

解决方法

一个类的特异性为10.一个元素的特异性为1.

因此,在第一个实例中：

> .main li选择器的特异性为12.
> .active选择器的特异性为11

因为它们都瞄准相同的元素,前者具有更高的特异性,后者失去了对元素进行风格化的战斗.

在第二个实例中：

> .primary p选择器的特异性为11.
> .copyright选择器的特异性为10.

同样,因为它们都针对相同的元素,后者失去了对元素进行样式化的战斗.

!important annotation胜过所有特异性.因此,通过应用,.active a和.copyright重新获取元素.

如果你想删除！important,这是正确的事情,因为这里没有必要,你可以改为提高选择器的特异性.

ID的特异性为100.因此,可以快速优先选择选择器.

这里有些例子：

.main li a      { color: #7ab2c1; }  /* prevIoUs winner; specificity 12 */
.main .active a { color: #ff0000; }  /* added class selector; specificity Now 21 */
.primary p      { font-size: 12px; } /* prevIoUs winner; specificity 11 */
#copyright      { font-size: 8px;} /* switched to ID selector; specificity Now 100 */
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<footer>
  <p><a href="#">Sign up</a> for our newsletter,it's a racket!</p>
  <p id="copyright">copyright &copy; sven's SNowshoe Emporium.
                    All Rights Reserved.</p>
</footer>

参考文献：

> How do I give a CSS class priority over an id?
> CSS Specificity
> CSS Specificity: Things You Should Know
> Relationship between !important and CSS specificity

CSS 之！important_html/css_WEB-ITnose

CSS 之！important_html/css_WEB-ITnose

今天写代码，碰到一个关于!important的问题。由于之前并没有好好理解这个概念，所以今天特意查了下资料做个总结。

CSS的原理：

我们知道，CSS写在不同的地方有不同的优先级， .css文件中的定义

首先，先看下面一段代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试Css中的!Important区别</title> </head> <style type="text/css">.testClass{ color:blue !important;}</style><body>    <div>        测试Css中的Important    </div></body></html>
登录后复制

虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的，无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：

.testClass{ color:blue !important;color:red;}
登录后复制

这样，在ie6下展示的时候会显示成红色。

当然，也可以通过以下方式来让ie6识别：

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，注意书写方式一般可以轻松避开的。



版权声明：本文为博主原创文章，未经博主允许不得转载。

关于我应该避免在CSS中使用！important吗？的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于css – 为什么不鼓励使用`！important`？、css – 如何使用LESS将变量声明为！important？、css – 理解特异性：在不使用！important 的情况下实现所需的选择器结果、CSS 之！important_html/css_WEB-ITnose的相关知识，请在本站寻找。

本文标签：

上一篇如何在Python中获得两个变量的逻辑异或？（python for两个变量）

下一篇Java。具有可能抛出参数的函数（NullpointerException）？（java存在三种可抛出异常）

相关文章