css !important使用方法及需要注意的地方
css中!important的作用
我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。
首先,先看下面一段代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
测试Css中的Important
</div>
</body>
</html>
虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。
css的优先级以及!important的使用
CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤)。起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目都是小规模的前端,也或与自己书写CSS的习惯有关(自己基本上就是逐层书写CSS,尽量把代码写得干净整洁),CSS优先级并没有成为某次项目的绊脚石。直到某次项目,因为用到的CSS库与自己页面的设计稿有冲突,才再次重视起CSS的优先级。
以下就将有关CSS的优先级的知识进行归纳整理:
①继承的不如指定的;②id>class>标签选择符;③越具体的样式越强大;④标签 id>id;标签 class>class。
CSS优先级权重的计算方法:CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优 先级,规则如下:
①元素标签中定义的样式,加1000;
②每个ID选择符,加0100;
③每个Class选择符、每个属性选择符、每个伪类,加0010;
④每个元素选择符或伪元素选择符,加0001;
将这四个数字分别累加,就得到每个CSS定义的优先级的值,然后从左到右逐位比较大小,数字大的CSS样式的优先级高。
举例:
假设对应example.html在example.css文件中定义如下样式:
1. h1{color:red;} /*一个元素选择符,结果为0001*/
2. body h1{color:green;} /*两个元素选择符,结果是0002*/
3. h2.grape{color:purple;} /*一个元素选择符、一个Class选择符,结果是0011*/
4. li#answer{color:navy;} /*一个元素选择符,一个ID选择符,结果是0101*/
而同时在example.html中有:
<style>
h1{color:blue;}
</style> /*元素标签中定义,一个元素选择符,结果是1001*/
1001是有关h1样式中计算最大的,所以h1元素的颜色应该是蓝色的。
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 【Vue.js】Vue.js中的Vuex、Vue-Ajax和京东购物车项目实战
- ubuntu16.04安全小结-01
- 重新认识HTTP3xx重定向机制
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
- 四大查找算法
- 从Python调用堆栈获取行号等信息
- 详解supervisor进程管理
- Python时间模块常用操作总结
- rtmp规范1.0
- 实战|Python轻松实现动态网页爬虫(附详细源码)
- 排序算法 --- 桶排序
- 8086汇编语言——操作内存中的数据
- JVM内存模型不再是秘密
- Python Google Protocol Buffer
- 看了这个总结,其实 Matplotlib 可视化,也没那么难!