详解CSS样式中的!important、*、_符号

 更新时间:2017年09月20日 14:49:14   投稿:lqh  
这篇文章主要介绍了详解CSS样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

详解CSS样式中的!important、*、_符号

!important、*、_其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的。

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。

首先,先看下面一段代码:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <div style="color:blue !important;color:red;"> 
    呵呵 
  </div> 
</body> 
</html> 

“呵呵”两字被定义了两个color,原本在color:red在color:blue之后,这两字应该是红色的,默认取最接近字体的颜色
但是color:blue之后添加了!important,导致color:blue的优先级最高,“呵呵”两字应为蓝色,具体效果如下:

然而,IE6并不能识别style属性中的!important符号,所以导致还是按原来的样式优先级,把“呵呵”两字搞成了红色。

css样式中的!important、*、_符号,皆是用来设置优先级的,但是这些符号,仅在特定的浏览器中适用,具体如下:

IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important;

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

下划线"_", IE6支持下划线,IE7和firefox均不支持下划线。

因此,可以在style属性中定义如下属性,来区分IE6,IE7,firefox:

background:orange;*background:green;_background:blue;

还可以这样来区分IE6,IE7,firefox:

background:orange;*background:green !important;*background:blue;

如下的代码:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <div style="background:orange;*background:green !important;*background:blue;"> 
    区分IE7、IE8、火狐 
  </div> 
  <div style="background:orange;*background:green;_background:blue;"> 
    区分IE7、IE8、火狐 
  </div> 
</body> 
</html> 

其运行效果如下:

(1)IE7

(2)IE8及其以上的浏览器,含火狐等。

(3)IE6

然而,这样的区别,仅能够自己用于调试,真正的前端编程还是应该利用JavaScript对浏览器的标识判断,来判断这些浏览器的类型。

最后再补充一句,其实IE6仅仅是不能识别style中的!important,如果代码如下所示:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>测试Css中的!Important区别</title>  
  <style type="text/css"> 
    .testClass{  
    color:blue !important; 
    } 
  </style> 
</head> 
<body> 
  <div class="testClass" style="color:red;"> 
    测试Css中的Important 
  </div> 
</body> 
</html> 

无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 在线ASC码查询

    在线ASC码查询

    在线ASC码查询...
    2006-09-09
  • 详解CSS开发过程中的20个快速提升技巧

    详解CSS开发过程中的20个快速提升技巧

    本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手。
    2021-05-05
  • 如何禁止打印页面

    如何禁止打印页面

    如何禁止打印页面...
    2006-08-08
  • CSS代码检查工具stylelint的使用方法详解

    CSS代码检查工具stylelint的使用方法详解

    stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint
    2020-02-02
  • 定义标题的最好方法

    定义标题的最好方法

    定义标题的最好方法...
    2006-09-09
  • HTML <!DOCTYPE> 标签

    HTML <!DOCTYPE> 标签

    在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页没有声明DOCTYPE,它就会以默认的DOCTYPE解释下面的HTML。在同 一种标准下,不同浏览器的解释模型都有所差异,
    2014-05-05
  • sass 常用备忘案例详解

    sass 常用备忘案例详解

    这篇文章主要介绍了sass 常用备忘案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • CSS3实例分享之多重背景的实现(Multiple backgrounds)

    CSS3实例分享之多重背景的实现(Multiple backgrounds)

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式)、background-position(设置背景图片在容器中的位置)、background-attachment(设置背景是否随页面一起滚动),通过这些属性来控制背景图片在容器中如何显示,但我们也只能为容器提供一张背景图片,如果我们想让一个容器的背景用多张图片实现,那么我们该如何去做呢?再在容器里添加一些无用的元素吗?
    2014-05-05
  • CSS之自动换行

    CSS之自动换行

    CSS之自动换行...
    2006-09-09
  • 纯CSS实现鼠标放上去改变文字内容

    纯CSS实现鼠标放上去改变文字内容

    这篇文章主要介绍了纯CSS实现鼠标放上去改变文字内容,需要的朋友可以参考下
    2014-05-05

最新评论