样式的优先级

多重样式(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. Core Animation 文档翻译 （第二篇）

    Core Animation 文档翻译 (第二篇) 核心动画基础要素 核心动画为我们APP内Views动画和其他可视化元素动画提供了综合性的实现体系.核心动画不是我们APP内Views的替代品,相反, ...

  2. Windows环境下在Oracle VM VirtualBOX下克隆虚拟机镜像

    1.定位到Vritualbox的安装目录 2.将安装好的.vdi文件复制一份到指定目录下 3.执行 VBoxManage internalcommands sethduuid F:\VirtualBo ...

  3. shift+zz保存并退出

    shift+z 输出的是大写Z shift+zz就是命令ZZ ZZ 执行退出VIM操作,如果文本已经经过编辑,则首先保存文件.

  4. inline函数不能在for循环中使用的原因

    inline函数的作用继承了宏定义的优点,没有了参数压栈,代码生成等一部分操作,并且摒弃了没有检查编译规则的缺点: 另外要注意,内联函数一般只会用在函数内容非常简单的时候,这是因为,内联函数的代码会在 ...

  5. Linux ssh双向免密认证

    一.实现原理 使用一种被称为"公私钥"认证的方式来进行ssh登录."公私钥"认证方式简单的解释是: 首先在客户端上创建一对公私钥(公钥文件:~/.ssh/id_ ...

  6. 枚举 输入流重载>> C++

    语言:C++ 我们可能会遇到这种情况:自己定义了一个枚举类型,但是却不知道如何重载输入流,使我们定义的枚举用起来不是很方便. 那么,如何去重载呢,我们先来看一下内置类型的测试过程: #include& ...

  7. 【Java学习笔记之四】java进制转化

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...

  8. c语言基础学习05

    =============================================================================涉及到的知识点有:for循环有两种写法.数组. ...

  9. [国嵌攻略][174][CGI快速入门-网页控制LED]

    CGI程序(Common Gate Way Interface) 在服务器外部供服务器调用的程序,CGI程序与服务器配合后能让服务器完成更强大的功能. 1.浏览器通过HTML表单或超链接请求指向一个C ...

  10. [学习OpenCV攻略][002][Ubuntu下OpenCV安装]

    配置环境 操作系统 Ubuntu 12.04 OpenCV版本 opencv-1.0.0 学习书籍 <学习OpenCV> Liunx软件安装方法主要有3种: 1.编译安装,也就是通过编译源 ...