可怜的老
!important
语句在CSS社区中受到了很多抨击,这是有充分理由的。 这是不必要的,会造成维护噩梦,并且会虚假地模拟级联。 多年以来,我一直没有考虑过使用!important
,直到我发现它有一个很好的用途:打印样式表。
假设我们要创建一个图片库。 为了尽力满足渐进式增强的理想,我们首先确保图像包含在HTML列表中。 最终,我们希望使用JavaScript创建淡入/淡出幻灯片效果,但是我们的基础是一列图像。 如果访问者禁用了JavaScript,这将是他们所看到的。
好的,到目前为止很好。 但是,当我们制作打印样式表时,我们会发现我们计划中的一个缺陷:当您使用JavaScript为HTML元素设置动画时,不可避免地要修改元素的style
属性。 在我们的幻灯片中,JavaScript更改了图像的position
和opacity
,因此一次仅显示一个。 当我们打印图库页面时,尽管我们只需要一列图像,但最终打印的只是一幅图像。 这是因为您无法为元素的style
属性中声明的CSS指定目标媒体类型; 您不能说在style
属性中声明的所有样式仅用于screen
。
因此,您需要的是一种指定可以覆盖内联样式的打印样式的方法。 只有一种方法可以做到: !important
。 在打印样式表中,重置图像元素的position
和opacity,
并添加!important
:
img.gallery {
position: static !important;
opacity: 1 !important;
}
就是这样; 我发现!important
的合法用途,并希望与他人分享。
From: https://www.sitepoint.com/important-is-actually-useful-in-print-style-sheets/