样式的优先级

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

(内部样式就是css写在html页面的<style>标签中)
(内联样式就是css直接写在html标签的style属性中)

选择器的优先权

1. 内联样式表的权值最高 1000;

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

CSS 优先级法则

A 选择器都有一个权值,权值越大越优先;

B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

D 继承的CSS 样式不如后来指定的CSS 样式;

E 在同一组属性设置中标有“!important”规则的优先级最大

F 同一个css文件中,对同一个选择器同一个优先级的内容,写得排在后面的内容会覆盖前面的内容。比如:.abc{margin:10px;}.abc{margin:20px;},最终的到的class为abc的内容的margin值是20px。这个原因是css文件的运行方式,是从前往后开始解读运行的。

css优先机制的更多相关文章

  1. css考核点整理(二)-css层叠机制

    css层叠机制 外边距重叠就是margin-collapse. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种合并外边距的方式被称为折叠,并且因 ...

  2. css优先级机制说明

    原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...

  3. CSS样式的优先机制

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

  4. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  5. 三.CSS层叠机制

    概述 层叠就是对样式的层叠.是某种样式在样式表中逐层叠加的过程.让浏览器对某个标签特定属性值的多个来源,最终确定使用那个值.层叠是整个CSS的核心机制. HTML文档样式的来源 1.浏览器默认样式,每 ...

  6. CSS定位机制

    CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...

  7. css层叠机制说明

    css通过建立与文档的关联而实施效果.文档结构重要性不言而喻,对于建立良好的内容索引.提高可维护性.较好的可访问性:另,利于css选择器选择.继承机制. 概要地讲,层叠机制是处理对文档上应用样式时解决 ...

  8. localStorage的黑科技-js和css缓存机制

    一.发现黑科技的起因  今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术.  呵呵,以下勾起了我侦探的欲 ...

  9. 关于CSS层叠机制

    谈到层叠机制,首先我们要知道什么是声明冲突. 声明冲突有三个条件:①多个选择器选中同一个元素:②声明块里的属性相同:③属性的属性值不同.同时满足这三点时就会产生声明冲突.比如下图html代码: < ...

随机推荐

  1. linq 动态排序,不使用反射

    之前网上搜索的相关方法都是使用了反射的方法来动态获取字段,以实现动态linq排序,但是因为项目组觉得此方法效率低下,所以不予采纳. 所以有了以下代码 public interface IBase{ d ...

  2. Eclipse背景颜色修改

    改变背景颜色(黑底背景的设置) windows->Preferences->General->Editor->Text Editors windows->Preferen ...

  3. 高斯混合和EM算法

    首先介绍高斯混合模型: 高斯混合模型是指具有以下形式的概率分布模型: 一般其他分布的混合模型用相应的概率密度代替(1)式中的高斯分布密度即可. 给定训练集,我们希望构建该数据联合分布 这里,其中是概率 ...

  4. cdoj 65 CD Making 水题

    CD Making Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/65 De ...

  5. Google Map和桌面组件 Android开发教程

    本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开 ...

  6. MyBatis学习练习

    转自:http://ccchhhlll1988-163-com.iteye.com/blog/1415621 基本目的:利用Mybatis完成对一个表简单的select.insert.update.d ...

  7. java 哈夫曼编码

    //哈夫曼树类 public class HaffmanTree { //最大权值 ; int nodeNum ; //叶子结点个数 public HaffmanTree(int n) { this. ...

  8. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  9. WPF 之 style文件的引用

    总结一下WPF中Style样式的引用方法. 一.内联样式: 直接设置控件的Height.Width.Foreground.HorizontalAlignment.VerticalAlignment等属 ...

  10. cigarettes

    描述 Tom has many cigarettes. We hypothesized that he has n cigarettes and smokes them one by one keep ...