使用“!CSS中的“重要”?

是的,我想说你使用 !important 是不好的做法,很可能会造成不希望的影响进一步线。但这并不意味着它永远不能用。

你怎么了 !重要的

Specificity

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

在这个页面上,所有的按钮都是黑色的。除了带有“highlight”类的蓝色按钮。除了一个ID为“buyNow”的唯一按钮,它是绿色的。整个规则(本例中的颜色和字体大小)的重要性由选择器的特定性管理。

!重要的 但是,是在属性级别而不是选择器级别添加的。例如,如果我们使用以下规则:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

那么颜色属性的重要性将高于字体大小。事实上,颜色比颜色更重要 button#buyNow

元素 <button class="highlight" id="buyNow"> 2em ,但是一种颜色 blue .

这意味着两件事:

2. 这个 替代蓝色的方法是使用 !重要的 声明,例如 选择器。

这不仅使样式表的维护和调试变得更加困难,而且会产生滚雪球效应。一个 !重要的 !重要的

什么时候可以使用:

这是什么 !重要的

• 替代第三方代码和内联样式。

一般来说,我会说这是一个代码气味的情况,但有时你只是没有选择。作为一个开发人员,你应该尽可能地控制你的代码,但是有些情况下,你的手被束缚了,你只需要处理现有的任何东西。使用 !重要的 谨慎地。

许多库和框架都附带了实用程序类,比如 .hidden .error ,或 .clearfix display: none 为了一个 .隐藏 例如,类)。这些样式应该覆盖元素上当前的任何其他样式,并且绝对保证 !重要的

结论

使用 声明通常被认为是不好的做法,因为它有副作用,扰乱了CSS的核心机制之一:特异性。在许多情况下,使用它可能表明CSS架构很差。

在某些情况下,它是可以忍受的,甚至是首选的,但是在使用它之前,一定要仔细检查其中一种情况是否适用于你的情况。

!important 强制语句始终应用,执行以下操作:

• 即使选择器的特异性较低,级别较低,它现在也比特异性较高的选择器强

大多数时候, 可以避免,因为选择器的特殊性处理哪一个有效,这就是级联样式的思想。然而,有些情况下(不太记得确切的一个),具体性不是那么符合逻辑,我不得不强迫 在声明上。

不使用/避免的理由 !重要的

• 防止用户使用自定义样式表(现在无法覆盖标记为重要的规则),这会破坏某些人的可访问性
• 使代码更难阅读,因为大脑通常很容易接受特定性,但记住的是什么 !重要的 使它更难阅读

我认为重要的是,我们再次触及这一点,在2014年底,当更多的规则被添加到工作草案中时,重要的是不要对你的用户施加限制。我写了一个小例子来解释发生这种事情的可能情景。这是从我在网上访问过的一个真实的网站上截取的,可悲的是,我经常看到它。

表单文本编辑器字段

你有一个网站,你的网站依赖于填写表格和编辑文本。为了尽量减少眼睛疲劳,你尝试使用一种你认为每个人都会接受的风格,而且由于你的用户主要在晚上访问,你决定将背景颜色设置为白色,然后将文本颜色设置为黑色。默认情况下,表单为空,因此您可以键入文本(这次)以确保其正常工作:

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

几个月后

...
background-color: white !important;   
color: black !important;
...

现在,这里发生了什么? 你期望什么

是的,你在白色的背景上得到白色的文本,如果用户尝试使用这种新样式(假设你保留了它),他们就不能再阅读你的网页了。

当然,你没有意识到这一点,因为文本框是空的。你认为它会起作用!(假设是开发商最大的敌人,它就在那里,骄傲和傲慢)。

制定并遵循自我暗示的规则

所以,基本规则应该是只使用!在设计对原始对象的替代时非常重要 完成 css规则集。请记住,它是为例外和扰乱自然秩序和css的意义放在首位。在大多数情况下,您根本不需要使用它。

了解用户如何自定义颜色

随着诸如扩展之类的工具的存在,以及像'用户风格.org“而且这是一款时尚的产品,你可能会因为使用它而疏远你的用户!重要的标签!请记住,时尚不会凌驾于它们之上。

永远不要限制你的访客

如果你用!重要提示:对于一个样式,请确保用户可以关闭该样式(我不是指通过web浏览器的内部“开/关”开关)。看在上帝的份上 不要 设为默认值。

广告

这个问题有点晚了,但它说 ". 你可能会发现它和 ! 在(房子的)前面 !important )因为在javascript中它不是一个运算符,而在css中它被称为一个分隔符标记,只是表示优先。这是一个例子。

没有 !重要的

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

输出

在底部属性上 (相同的)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

红色 (无论如何都会是红色的)

!重要的 (相同的)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

蓝色 (表示忽略红色,使用蓝色)

对我来说,使用 !important !重要的 ,物业现在会优先考虑最新的重要价值。

goto 脚本中的关键字。虽然这是完全合法的,但最好还是避免。

但尽量远离它,尽量少用!尽可能重要。

更不清晰 任何一个在你之后来维护这个的人都会把他/她的头发撕成碎片,就像试图寻找!重要的是,每次在CSS中做某事都是一件非常痛苦的事情。

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

嗯,我想用 !important

我今天刚用过,这是完成工作的唯一方法。 也许这不是做某事的好方法,但有时却是唯一的方法。

!important 那是你的吗 CSS 在任何情况下,您都必须尽量避免深度选择(更优先),因为将来您或其他人(通常用于大型项目)将需要在不更改原始样式的情况下覆盖这些样式,然后此样式将有有限的自由来执行此操作。 他需要使用 !重要的

!重要的是一个因素,它会使你的代码为被重写的东西而虚荣

这个!在这里,它并不意味着逻辑上的不,因此在代码中,它变得令人不安!重要的是经常是一个巨大的灾难在计算。

例如,如果你想 display: block; display: none; :

p {
   display: none;
   display: block !important /*Now overriden*/;
}

<p>Some Paragraph</p>

!important 是一个最好避免的关键字,什么时候用它,可能是有影响的时候,请点击这个链接看看什么时候用 !重要的 !important Style Rule - CSS-Tricks