欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

如何使用!important来改变CSS中优先级的顺序

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

每个样式表的优先顺序是在前面的页面上记载的,在相同的样式表中,同一元素的属性设定多个值的情况下,会发生什么呢?本篇文章就来给大家分享一下如何使用!important来改变CSS中优先级的顺序。

我们来看一个简单的例子。首先,创建目标HTML语句

<!DOCTYPE Html>
<Html>
<head>
	<title></title>
	<style type="text/Css">
strong {
  color: #00ff00;
}
strong {
  color: #ff0000;//red
}
	</style>
</head>
<body>
<p>
啦啦啦啦<strong>杨雨个人博客</strong>
哒哒哒哒哒<strong>php</strong>中文网
</p>
</body>
</Html>

浏览器上效果显示如下:strong元素中文字的颜色是红色。

360截图20181120165834239.jpg

接下来我们来看一下!important的使用

如果要改变代码中优先级,则需要使用!important,使用方法如下。

选择器{ 
  property(属性):value(值) !Important ; 
  }

在描述样式时,如果在值之后用空格再写!important,则无论正常优先级如何,都将优先应用该样式。

下面我们来看一下具体的例子,将上述代码中的CSS变成如下所示

<style type="text/Css">
strong { 
  color:#00ff00 !important; 
} 

strong { 
  color:#ff0000; 
} 
</style>

浏览器上显示如下所示:strong元素中字体颜色变成了绿色,!important改变了样式的优先级。

360截图20181120170720402.jpg

我们接下来看看当样式表不同时!important的使用

样式表的优先级如下所示

(高优先级)
样式表在HTML文档中描述
用户样式表由用户查看
样式表设置每个浏览器的默认样式表 (低优先级)

如果使用HTML文档中描述的样式表为同一元素的属性再次设置在用户样式表中设置的样式表,样式表形式将生效。

那么如果在用户样式表设置中添加“!Important”会发生什么?在这种情况下,带有“!Important”的样式优先。我们来具体看一下。

(高优先级)
有!important的用户的样式表
有!important写HTML文档中的样式表
写在HTML文档中的样式表
用户样式表
默认样式表 (低优先级)

需要特别注意的是“带有!important的用户样式表”比“带有!important的HTML文档描述的样式表”具有更高的优先级。因此,即使HTML文档的创建者将样式设置为“!Important”,如果在用户样式表中将新样式值表设置为“!Important”,则用户样式表也会生效。 本文地址:http://itbyc.com/web/css3/19975.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1