CSS样式表层叠
程序员文章站
2022-06-18 10:30:19
...
样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。这时,它的优先级顺序就显得比较重要。一下优先级]从低到高:
(1).浏览器样式(元素自身携带的样式);
(2).外部引入样式(使用<link>引入的样式);
(3).文档内嵌样式(使用style元素设置);
(4).元素内嵌样式(使用style属性设置);
如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案标记成重要样式(important)
(1).浏览器样式(元素自身携带的样式);
(2).外部引入样式(使用<link>引入的样式);
(3).文档内嵌样式(使用style元素设置);
(4).元素内嵌样式(使用style属性设置);
//元素内嵌 <p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>
//文档内嵌 <style type="text/css"> p { color:blue; font-weight:bold; } </style>
//外部引入 <link rel="stylesheet" href="style.css" type="text/css">
如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案标记成重要样式(important)
//强行设置最高优先级 p{ color:green !important; }