样式的优先级

多重样式(Multiple Style):如果外部样式、内部样式、内联样式同时应用于同一个元素，就是使用多重样式的情况。

一般情况优先级如下：

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

有一个例外的情况，就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

示例如下:

<head>
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>

选择器的优先级：

内联样式表的权值最高1000,

ID选择器的权值为100，

class类选择器的权值为10，

html标签选择器的权值为1

CSS优先级法则:

A选择器都有一个权值：权值越大越优先。

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

C网页编写者设置的css样式的优先权高于浏览器设置的样式

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

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

<html>
  <head>
    <style type="text/css">
     #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

Css的优先级机制的更多相关文章

  1. CSS 的优先级机制[总结]

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

  2. CSS 的优先级机制总结

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

  3. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  4. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  5. css优先级机制说明

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

  6. CSS 之 样式优先级机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...

  7. css优先级机制

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.   1.important >(内联样式)Inline style  >(内部样式)Internal style sheet ...

  8. css的优先级 和 权重

    之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是  按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...

  9. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

随机推荐

  1. [转载]阿里云MySQL优化主从同步，降低数据延迟

    1. 背景 为了提高系统的可用性和数据保护,MySQL通常采用master-slave的部署结构,简单高效,master和slave之间使用binlog来复制数据. binlog支持statement ...

  2. React Native分享第三方遇到的问题

    这几天做APP的分享,好多东西都不懂,踩了好多坑,所幸现在做好了,开心^_^ 时间紧,随便记一下先. 1.签名文件要和各平台的签名一致 2.新浪微博和微信的分享要打包之后,加上签名了才可以(我一直不知 ...

  3. Coursera课程 Programming Languages, Part C 总结

    碎言碎语 和前面的 ML 和 Racket 感觉明显不一样了,一边学着一边觉得这真是一门奇怪的语言,有着各种奇怪的语法,不过真的算是一个奇妙的体验(相比前面的两门语言,Ruby 的学习资源多了不少). ...

  4. Vivado常见问题集锦

    5. Vivado软件更新新版后更新IP 当更新到新版本的Vivado后,之前的一些工程的IP是不能直接打开使用的,这个时候我们只需要使用新版本的Vivado更新一下每个工程的IP即可,使用新版本Vi ...

  5. Java关于使用“final”修饰基本类型的注意事项

    今天无意发现这样一道题,可以先做做看: 正确答案是BCD. 至于原因有人给出了参考答案: 1.所有的byte,short,char型的值将被提升为int型: 2.如果有一个操作数是long型,计算结果 ...

  6. Mysql安装与主从配置

    安装MySql 操作系统:Windows Server 2008 R2 Standard MySql版本:mysql-5.7.17-winx64 第一步:解压mysql-5.7.17-winx64.z ...

  7. flask-session组件

    简介 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: redis mem ...

  8. 读书笔记《PHP与MySQL程序设计》一

    第1章 PHP概述 1.1  历史(PHP4.PHP5.PHP5.3.PHP6[未发布]) 1.2 一般语言特性(实用性.强大功能.可选择性.成本[开源]) 第2章 环境配置 2.1 安装的前提条件( ...

  9. 读了前半本<Thinking in Java>

    读了1-14章.这本书真的不适合初学者,可能比较适合有一两年Java经验的人来读.学习真的是一个螺旋递进的过程.刚开始学Java基本语法,书上看到的很多东西觉得过于细枝末节,没见过,用不上,导致书看不 ...

  10. 利用python写一个简单的小爬虫 爬虫日记（1）（好好学习）

    打开py的IDLE >>>import urllib.request >>>a=urllib.request.urlopen("http://www.ba ...