一、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. P4491 [HAOI2018]染色 容斥+NTT

    $ \color{#0066ff}{ 题目描述 }$ 为了报答小 C 的苹果, 小 G 打算送给热爱美术的小 C 一块画布, 这块画布可 以抽象为一个长度为 \(N\) 的序列, 每个位置都可以被染成 ...

  2. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  3. js常见报错解决方法

    1.获得类名document.getElementsClassName(常出现一个问题): getClassName("gn","pt")[0].appendC ...

  4. 简述Dubbo

    目前处于实习期间,白天工作,网上自主学习.最近没事逛了一下当前招聘网上的招聘要求,其中dubbo这个关键字出现的比较多,因此花了点时间学习了一番,在这写写自己的理解. 说起Dubbo,得先聊聊RPC, ...

  5. FlutterToast 使用

    参看 FlutterToast 开源库 https://github.com/PonnamKarthik/FlutterToast

  6. linux使用curl命令行进行接口测试

    cURL介绍cURL 是很方便的Rest客戶端,可以很方便的完成许多Rest API测试的需求,甚至,如果是需要先登入或认证的rest api,也可以進行测试,利用curl指令,可以送出HTTP GE ...

  7. sizeof(数组名) 与 数组长度

    int a[] = {1, 2, 3, 4}; cout << sizeof(a); //16 char b[] = "abc"; cout << size ...

  8. Java_break与continue区别

    使用场合不同 break:可以在switch case中使用,也可以在循环中使用   continue:只能在循环中使用,除了switch case 作用不同 break:表示中断,当在switch ...

  9. Python 实现flatten功能

    from collections import Iterable def flatten(items): for x in items: if isinstance(x, Iterable) and ...

  10. 学习java虚拟机笔记

    虚拟机jvm 包括 类加载机制 ,运行时数据区域 运行时数据区域包括 ,程序计数器,虚拟机栈和本地方法栈,堆,方法区. 程序计数器是一块较小的内存控件, 用来指定当前字线程执行节码的行数 ,每个程序计 ...