避免在css中使用!importamt
!importan
是强制css使用某个格式。在平常中我们很容易看到!important
的使用,包括我以前,也会经常使用。强制覆盖css,真的挺方便,但大多数css规范都建议避免使用!importan
t。
!important
作用
当刚刚开始使用CSS时,!important
就像是一个秘密武器,可以在样式没有按预期工作时强制覆盖。
例如:假设你想要将<blockquote>
元素中出现的所有内容用斜体显示 :
blockquote * {
font-style: italic;
}
由于某种原因(比如需要修改某些ui库的样式),它没有像你期望的那样工作,因此你可以添加!important
blockquote * {
font-style: italic!important;
}
在这种情况下你实际做的是将<blockquote>
中所有内容的特异性提高到一个不合理的高级别。通过使用!important
,你实际上告诉浏览器,在任何情况下,<blockquote>
中的元素都不应该是斜体之外的任何样式。
其实,你已经犯了一个错误。
why
使用与上面相同的场景,6个月过去了,你的团队中的另一个开发人员A需要在某些情况下开发<blockquote>
文本:
<style>
cite {
font-style: normal;
}
</style>
<body>
<blockquote>
<p>Don't write lazy CSS</p>
<cite>- Nick Rollins</cite>
</blockquote>
</body>
此时A想让cite的font-style为normal,然后并不知道为啥不起作用。此时,A唯一的选择是添加!important
标记以强制应用样式。
cite {
font-style: normal!important;
}
!important
循环不断开始......
唯一可以覆盖!important
标签是另一个!important
,通过使用它。最终可能得到的是一个充满!important
的文件。这是不理想的。
If all your styles are !important, then none of your styles are important.
解决
css编写顺序
css的编写顺序,确定哪种css样式优先的第一个规则。
<blockquote>
<p>What color is the blockquote?</p>
</blockquote>
<style>
blockquote {
font-style: italic;
background: yellow;
}
blockquote {
background: pink;
}
</style>
第二个background将会覆盖第一个background属性,但是不会修改font-style属性,
标签将会继承pink、italic样式。
关于css层叠可以看一下这篇文章Cascade
继承属性规则
继承允许子元素从父元素继承样式。当我们需要覆盖样式的时候,可以通过css定位子元素来轻松完成。
<blockquote>
<p>What color is the blockquote?</p>
</blockquote>
<style>
blockquote {
font-style: italic;
background: yellow;
}
blockquote {
font-style: normal;
background: pink;
}
</style>
在第二个声明normal会覆盖第一个italic的字体样式。但是由于
元素仅仅继承了font-style属性,因此我们可以通过在CSS中定位
元素来轻松地再次覆盖此样式。
p {
font-style: italic;
}
blockquote {
font-style: italic;
background: yellow;
}
blockquote {
font-style: normal;
background: pink;
}
此时可以发现字体样式发生了变化,为italic,css编写的顺序并不会影响
的样式,因为我们写了一个更具体的**css选择器。**这种情况下,专门为子元素声明的样式将覆盖其父元素的继承样式,该特性来自于使用CSS选择器。
html|css的元素文档可以参考HTML5 and CSS3 References目前css3可以继承的属性如下:
azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing
css属性权重计算
计算规则:[内敛风格和!importan不属于选择器,放在这为了方便理解]
得分 | 选择器 |
---|---|
0.0.0.0.0 | * |
0.0.0.0.1 | 元素或伪元素 |
0.0.0.1.0 | class,伪类或数据属性 |
0.0.1.0.0 | ID |
0.1.0.0.0 | 内联风格 |
1.0.0.0.0 | !important |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#hello {
color: bisque;
}
.test {
color: blue;
}
div p {
color: aqua;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p class="test" id="hello">
hello world
</p>
</div>
</body>
</html>
选择器 | 结果 |
---|---|
#hello | 1.0.0 |
.test | 0.1.0 |
div p | 0.0.2 |
p | 0.0.1 |
上面的hello world将显示bisque样式。
总结
当你的风格不是“如你想的那样工作”的时候,你不必使用!important
标签,还有很多其他的选择。现在Web Component也可以加上style scopoed
而不影响其他样式。
请注意,万不得已的情况下避免使用!important
。