一、css样式的权重：！important(1000+) > 内联样式(  1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > 默认样式( 0 )

二、常用的样式顺序： 内联样式表 > ID 选择器 > Class 类选择器 >  HTML 标签选择器

三、说明：

1.  选择器的权值越大越优先，“!important”的优先级最大；

2.  当权值相等时，后设置的样式会覆盖先设置的样式；

3.  自定义的CSS 样式的优先权高于浏览器设置的样式；

4.  后指定的CSS 样式优先于继承的CSS 样式；

css样式的优先顺序的更多相关文章

  1. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  2. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  3. css样式的书写顺序及原理——很重要！

    记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一 ...

  4. css样式的书写顺序及原理

    刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...

  5. 【转】css样式的书写顺序及原理——很重要！

    记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一 ...

  6. CSS中样式覆盖优先顺序

    原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...

  7. 【知识总结】CSS中样式覆盖优先顺序

    层叠样式类型 类型: 1. 浏览器默认样式 2. 浏览器用户自定义样式 3. 外部样式表 4. 内部样式表 5. 内联样式表 顺序: 浏览器默认样式 < 浏览器用户自定义样式 < 外部样式 ...

  8. css样式，层叠顺序属性z-index

    在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高 详情推荐百度百科:z-index z-index是针对网页显示中 ...

  9. CSS样式的优先机制

    链接:http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html 又抓到虫子了:IE中奇怪的应用CSS的BUG:http://www.c ...

随机推荐

  1. ghj1222被坑记录[不持续更新]

    考试注意事项:link1 link2 (密码:wangle) 调不出来bug,可以先透彻一会儿或者是上个厕所或者坐一会别的题(间隔至少20min),然后通读代码 -1. 考试先读题,读题之后搞出一个做 ...

  2. leetcode-198-House Robber（动态规划）

    题目描述: You are a professional robber planning to rob houses along a street. Each house has a certain ...

  3. esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx);

    esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx){ if (s_event_init_flag) { return ESP_ ...

  4. squid的简单介绍

    squid的简单介绍 squid的概念 squid是一种用来缓存Internet数据的软件.接受来自人们需要下载的目标(object)的请求并适当的处理这些请求.也就是说,如果一个人想下载一web界面 ...

  5. 剑指offer——面试题16：数值的整数次方

    // 面试题16:数值的整数次方 // 题目:实现函数double Power(double base, int exponent),求base的exponent // 次方.不得使用库函数,同时不需 ...

  6. npm run build报错 ,resolve is not defined

    今天在build项目的时候报: ReferenceError: resolve is not defined npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ...

  7. Angular 2 升级到 Angular 5

    Angular 2 升级到 Angular 5 ts文件最上面的import语句里不要添加 .ts 后缀 , 不然 npm start 编译会失败 . 虽然浏览器能打开项目的URL , 但是内容会丢失 ...

  8. validate表单校验插件笔记

    1validation知识点 1 validation基础 validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  9. unity收集log工具

    参考 yusong:http://www.xuanyusong.com/archives/2477 凉鞋     :https://www.cnblogs.com/liangxiegame/p/Uni ...

  10. 我Java学习时的模样（三）

    读Java源码 平常使用Java的时候,那些集合类使用起来很顺手,但是有没有想过这些集合内部的实现原理是怎样的,它的添加移除都有哪些操作? 有了一些工作经验之后,必须要读一读Java包中的源码,需要知 ...