我已经在网站上工作了几个月,很多次尝试编辑某些东西时,都必须使用!important
, 例如 :
div.myDiv {
width: 400px !important;
}
为了使其按预期显示。这是不好的做法吗?还是!important
可以使用该命令?这会导致任何意外的后果吗?
是的,我想说您的使用示例!important
是不好的做法,很可能会进一步导致不良后果。但这并不意味着永远都不能使用。
!important
:当浏览器决定CSS如何影响页面时,特异性是起作用的主要力量之一。选择器越具体,对其添加的重要性就越高。这通常与所选元素出现的频率一致。例如:
button {
color: black;
}
button.highlight {
color: blue;
font-size: 1.5em;
}
button#buyNow {
color: green;
font-size: 2em;
}
在此页面上,所有按钮均为黑色。除了“highlight”类的按钮是蓝色的。除了ID为“buyNow”的唯一按钮(绿色)之外。整个规则的重要性(在这种情况下为颜色和字体大小)由选择器的特殊性来管理。
!important
但是,是在属性级别而非选择器级别添加的。例如,如果我们使用以下规则:
button.highlight {
color: blue !important;
font-size: 1.5em;
}
那么color属性的重要性就比font-size更高。实际上,颜色比button#buyNow
选择器中的颜色更重要,而不是字体大小(字体大小仍由常规ID与类的特定性决定)。
元素<button class="highlight" id="buyNow">
的字体大小为2em
,但颜色为color blue
。
这意味着两件事:
!important
声明,例如在button#buyNow
选择器中。这不仅使样式表难以维护和调试,而且还产生滚雪球效应。一个!important
导致另一个覆盖它,另一个导致另一个覆盖等等。它几乎永远不会只停留一个。即使!important
是一个有用的短期解决方案,但从长远来看,它会再次吸引您。
这就是!important
最初发明的目的:为用户提供一种替代网站样式的方法。辅助功能工具(例如屏幕阅读器,广告拦截器等)已广泛使用它。
通常,我会说这是一种代码异味的情况,但是有时您别无选择。作为开发人员,您应该致力于对代码进行尽可能多的控制,但是在某些情况下,您的双手被束缚住了,您只需要使用现有的东西即可。使用!important
谨慎。
许多图书馆和框架配备了实用工具类喜欢.hidden
,.error
或.clearfix
。它们仅用于一个目的,并且通常仅应用很少但非常重要的规则。(例如,display:none
对于一个.hidden
班级)。这些应该覆盖元素上当前使用的所有其他样式,!important
如果您问我,肯定可以保证。
使用!important
声明通常被认为是不好的做法,因为它的副作用会干扰CSS的核心机制之一:特异性。在许多情况下,使用它可能表示CSS体系结构不佳。
在某些情况下,它是可以忍受的,甚至是首选的,但是在使用它之前,请确保您仔细检查其中一种情况是否确实适用于您的情况。
问题内容: CSS是什么意思? CSS 2中可用吗?CSS 3? 在哪里支持?所有现代浏览器? 问题答案: 从本质上讲,它的意思是说。“这很重要,请忽略后续规则,以及所有常见的特异性问题,请应用 此 规则!” 在正常使用中,外部样式表中定义的规则被文档中定义的样式所取代,而样式本身又被元素本身内的内联样式所取代(假设选择器的特异性相同)。用“属性”(?)定义规则将放弃关于“后继”规则优先于“较早”
问题内容: 考虑: 我了解运作方式。在这种情况下,div将呈现红色,因为现在它具有优先级()。但是我仍然找不到适合的情况来使用它。是否有节省时间的示例? 问题答案: 这是现实生活中的场景 想象一下这种情况 您有一个全局CSS文件,该文件可以全局设置网站的外观。 您(或其他人)对元素本身使用内联样式,这 通常是 非常不好的做法。 在这种情况下,您可以将全局CSS文件中的某些样式设置为重要样式,从而覆
important 早在90年代中期到后期起草的 CSS1规范中就介绍过 !important,它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重。 一直以来 !important 的用法几乎没变,只在CSS2.1中有一点变化,并且在CSS3规范中没有对它做任何添加和修改。 层叠的概述 下面的提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体
问题内容: 我在应用的样式时遇到了麻烦。我试过了: 这 什么都不做 ; 不会应用任何宽度样式。有没有一种类似jQuery的方式来应用这种样式而不必覆盖(这意味着我需要先对其进行解析,等等)? 编辑 :我应该补充一点,我有一个样式表,该样式表中有我要用内联样式覆盖的样式,因此使用等不起作用,因为它被我的外部样式覆盖。 此外,将覆盖以前的值的值 进行计算 ,所以我不能简单地创建另一个外部风格。 问题答
问题内容: 对css和纯粹的开发人员了解不多,但是有些无法解决的 困惑却使我无法解决 我正在使用带有一些Jquery灯箱效果的表单,该表单带有和 在我的css文件中,我看到了以下条目 但是,当此表单显示为jquery弹出窗口时,它会在Mozilla中正确显示,但在Google chrome和IE上,该框不能像部分表单那样正常显示,而是作为滚动条显示。 当我通过萤火虫(第一次使用:)看到它时,它向我
问题内容: 有时是有用的,例如,如果我为网站上的所有链接(例如选择器)定义了通用样式,但是当我要覆盖某些规则时,可以有以下选择: 使用更具体(更长)的选择器 采用 哪种方法更好,可能有一些指导原则? 问题答案: 使用非常,非常谨慎- 它会覆盖刚才的一切,甚至是内联样式和混乱在低于显而易见的方式与样式规则“梯级”,让CSS的名字。它很容易使用不当,而且容易成倍增加,尤其是在滥用时。您可以轻松地得出一