发表于： 2019-03-04 23:09:26
1 687
今天完成的事情：
完成了css任务八九 的最后一个页面
明天计划的事情：
完成css任务八九 并开始css任务十
收获：
当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上!important与优先级无关，但它与它直接相关。
使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
- 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
- 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
- 永远不要在全站范围的 css 上使用 !important
- 永远不要在你的插件中使用 !important
- 取而代之，你可以：
- 更好地利用CSS级联属性
- 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
<div id="test">
<span>Text</span></div>
div#test span { color: green }span { color: red }div span { color: blue }
- As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.
无论你css语句的顺序是什么样的，文本都会是绿色的(green)，因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）
什么的情况下可以使用 !important：
A) 一种情况
- 你的网站上有一个设定了全站样式的CSS文件，
- 同时你（或是你同事）写了一些很差的内联样式。
在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
活生生的例子比如：一些写得很糟糕的 jQuery插件里面使用的内联样式。
B) 另一种情况
#someElement p { color: blue; } p.awesome { color: red; }
在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高
怎样覆盖 !important
A)很简单，只需再添加一条 带!important 的CSS规则，要么给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。
一些拥有更高优先级的例子：
table td { height: 50px !important; }.myTable td { height: 50px !important; }#myTable td { height: 50px !important; }
B)或者使用相同的选择器，但是置于已有的样式之后：
td { height: 50px !important; }
C)或干脆改写原来的规则，以避免使用 ! important 。
返回列表
评论