详解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表现都是一致的，都显示蓝色。

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

赞 (0)

相关推荐

  • 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px");和 $("div.test").css("width&

  • 原来CSS里的 !important 是如此用法

    点击查看效果: Untitled Document .aa{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #FF0000 !important } .bb{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #FF0000; } 以下两个DIV的

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

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

    详解CSS样式中的!important.*._符号 !important.*._其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的. 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv

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

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

    1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性. 大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin.padding改变浏览器默认的盒模型. *{box-sizing:border-box;margin:0;padding:0} 使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它. 2.继承

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • 详解在Angular4中使用ng2-baidu-map的方法

    一.引言 之前在Angular4使用过百度地图,记录一下踩过的坑 二.实现 1.安装 npm install angular2-baidu-map 2.在app.module.ts配置 ak key在http://lbsyun.baidu.com/apiconsole/key中创建 import { BrowserModule } from '@angular/platform-browser' import { NgModule } from '@angular/core' import {

  • 详解CSS不定宽溢出文本适配滚动

    详解CSS不定宽溢出文本适配滚动

    hover 时弹出框提示 一种可行的方案是在 hover 的时候,弹出一个文本框展示全文,最简单的就是在文本标签下添加 title 属性,填充我们需要的内容: <ul> <li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li> </ul> 当然,这种方法简单但是可能缺乏点用户体验. 本文将简单介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hove

  • 详解CSS玩转图片Base64编码

    详解CSS玩转图片Base64编码

    什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到). 没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本

  • 详解CSS不受控制的position fixed

    详解CSS不受控制的position fixed

    失效的 position:fixed 在许多情况下,position:fixed将会失效.MDN用一句话概括了这种情况: 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先. What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了transform的祖先元素进行定位. 那么,为什么会发生这种情况呢?说好的相对视

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

随机推荐