样式的优先级

多重样式(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. jsp数据

    ---恢复内容开始--- JSP 是什么 JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结 ...

  2. 记录CentOS环境下将Solr部署到Tomcat

    首先切换到usr/local目录 cd /usr/local/ 下载tomcat到local目录 wget http://archive.apache.org/dist/tomcat/tomcat-7 ...

  3. 解析Linux中的VFS文件系统之文件系统的注册（二）

    继上一篇文章:http://www.cnblogs.com/linhaostudy/p/7397024.html 3. 文件系统的注册 这里的文件系统是指可能会被挂载到目录树中的各个实际文件系统,所谓 ...

  4. HTML基础知识（常见元素、列表、链接元素、图片元素）

    1.HTML有关概念 全称: Hyper Text Markup Language(超文本标记语言) 其文件扩展名为".html"或".htm" * 超文本 - ...

  5. XOR算法的原理和实现

    XOR算法的原理和实现 XOR算法这种方法的原理 当一个数A和另一个数B进行异或运算会生成另一个数C,如果再将C和B进行异或运算则C又会还原为A. 相对于其他的简易加密算法,XOR算法的优点如下. ( ...

  6. 51nod 1575 Gcd and Lcm

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1575 万年巨坑终于填掉了…… 首先是煞笔西瓜的做题历程O_O. ...

  7. CodeForces628-B.New Skateboard

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. Kruskal求最小生成树

    #include<bits/stdc++.h> using namespace std; ; ; const int inf = 0x3f3f3f3f; ; typedef long lo ...

  9. Jungle Roads(kruskar)

    Jungle Roads 题目链接;http://poj.org/problem?id=1251 Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...

  10. ThinkPHP3.2基础知识（二）

    1.单入口模式的好处: 安全,灵活.可集中进行安全处理,访问统计等统一控制. 2.入口文件中为什么要判断PHP版本,TP要求PHP的版本是什么? 因为ThinkPHP3.2版本只能在PHP版本5.3. ...