样式的优先级

(外部样式)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. phantomjs

    PhantomJS是以WebKit为核心并提供JavaScript编程接口(API)的无界面浏览器. 它提供对web标准的 快速 并且 原生 的支持: DOM操作.CSS选择符.JSON.Canvas ...

  2. Java常见排序算法之堆排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  3. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  4. C++ CreateDirectory

    创建文件夹 关键点 CreateDirectory The CreateDirectory function creates a new directory. If the underlying fi ...

  5. 微信公共服务平台开发(.Net 的实现)13-------网页授权(下 :C#代码的实现 )

    接着上次的理论,我们这次来研究用代码实现“网页授权获取用户基本信息”,首先我们需要一个链接指向微信的授权页面,在微信开发平台中已经说了,这个链接必须在微信客户端中打开,那么我们就干脆使用文本消息来完成 ...

  6. The sound of silence引发的关于互联网以及教育的利弊思考

    “茫茫人海里,人群跟著人群,我们无时无刻不感到孤寂.停下来让我们好好沟通吧,否则人类的关系将日形恶化,沦为新世纪科技的牺牲品” ------- Simon 说实话,我第一次看<毕业生>应该 ...

  7. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  8. windows 7 与linux 双系统 安装

    注意事项: 1.安装Linux的时候,一定要选 “空闲”的硬盘去创建标准分区,否则会格式化C盘或D盘windows的资料.[如 /dev/sda1 为c盘主分区,sda2为扩展分区---下面有D盘,E ...

  9. 关于Android中获取Intent里的数据

    Intent获取数据和发送数据的办法: //直接通过Intent发送 intent.putExtra("name","wytings"); //直接通过Inte ...

  10. iOS开发中添加PrefixHeader.pch要注意的问题

    在Xcode6.0已经不默认生成PrefixHeader.pch文件了,而PrefixHeader.pch文件对我们开发带来的便利性是不言而喻的,所以我们怎么在工程中添加PrefixHeader.pc ...