样式的优先级

多重样式(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. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  2. 模拟退火算法实例（c++ 与 c# 实现）

    此片文章主要参考CSDN博主里头的一篇文章, 将自己的理解写下来,以方便后期的查阅. 一.C++ 实现 1. 已知平面上若干点坐标(xi, yi), 求平面上一点p(x, y) , 到这些点的总距离最 ...

  3. Python面试题解答

    1. 一个谜题 >>> t = (1, 2, [30, 40]) >>> t[2] += [50, 60] 到底会发生下面 4 种情况中的哪一种? a. t变成(1 ...

  4. 发布到ASP.NET CORE项目到 Windows server 2012

    原文: https://github.com/zeusro/MarkdownBlog/blob/master/2018/2018-01-17-01.md 发布到ASP.NET CORE项目到 Wind ...

  5. Flask-SQLAlchemy

    Flask-SQLAlchemy   SQLAlchemy 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言 ...

  6. Ajax方式分页加载列表实现

    在前面: 最近需要用到这个功能,所以这几天一直在研究这个,目前大致功能已实现,后续需要完善,但需要的功能点已完成,记录下: 1.分页功能引入bootstrap的分页插件: <script typ ...

  7. CTF---密码学入门第二题 我喜欢培根

    我喜欢培根分值:20 来源: Ph0enix 难度:中 参与人数:3449人 Get Flag:1410人 答题人数:1653人 解题通过率:85% key: CTF{} 解题链接: http://c ...

  8. BZOJ3529: [Sdoi2014]数表

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3529 挺恶心的数论TAT... 设f[i]是i的约数和,这个可以nln(n)扫出来. ans= ...

  9. HDU-1013九余数定理

    题目传送门:HDU1013 九余数定理 //题目描述:给定一个数,要求你求出它的每位上的数字之和,并且直到每位上的数字之和为个位时候输出它 //输入:一个整数 //输出:题目描述的结果 //算法分析: ...

  10. Linux编译安装Mariadb数据库

    一.安装cmake cd /usr/local/src tar zxvf cmake-2.8.12.1.tar.gz cd cmake-2.8.12.1 ./configure 注意报错需要安装gcc ...