原文:css优先级机制说明

首先说明下样式的优先级,样式有三种：

1. 外部样式（External style sheet）

示例：

<!-- 外部样式 bootstrap.min.css -->

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

2.内部样式（Internal style sheet）

示例:

<head>

     <style type="text/css">

      /*内部样式*/

      h1 {color:blue;}

    </style>

</head>

3.内联样式（Inline style）

示例：

<h1 style="color:blue">样式测试</h1>

虽然内联样式可以比较灵活的单独改变某一标签的样式，但还是建议尽量不要使用内联样式。因为这样做虽然更为直观，但不符合结构与表现分离的设计思想。

一般来说，以上三种样式的优先级如下：

内联样式>内部样式>外部样式

选择器的优先级：

选择器的种类可以分为三种，分别是：

1.标签名选择器  如 h1{}。

2.类选择器  如 .test{}。

3.ID选择器  如 #test{}。

同时还需要考虑到内联样式表，即在标签内写入style=""的方式。

在此我们用数字1000，100,10,1来表示上述三种选择器和内联样式表的权值，数字越大则权值越大，也就是优先级越高。

各个选择器的权值如下：

1.  内联样式表的权值最高，设为1000；

2.  ID 选择器的权值其次，设为 100

3.  Class 类选择器的权值第三，设为 10

4.  HTML 标签选择器的权值最低，设为 1

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

     <style type="text/css">

      /* 内部样式 */

      #blueP  p

      {

           /* 权值 = 100+1=101 */

          color:blue;

      }

      #blueP  .red

      {

          /* 权值 = 100+10=110 */

          color:red;

      }

       #blueP  p  span

      {

           /* 权值 = 100+1+1=102 */

          color:yellow;

      }

       #blueP  span

      {

           /* 权值= 100+1=101 */

          color:black;

      }

    </style>

</head>

<body>

    <div id="blueP">

        <p class="red">优先级测试

            <span>优先级测试</span>

        </p>

        <p>优先级测试</p>

     </div>

</body>

</html>

在火狐，IE10，Chrome浏览器页面显示结果如下：

<p class="red">标签内的内容显示为红色

<span>标签内的内容显示为黄色

最后一个<p>标签内的内容显示为蓝色

另外在同一组属性设置中标有“!important”规则的优先级最大，示例如下：

<head>

     <style type="text/css">

      /*内部样式 */

      #redp p

      {

         color:red !important; /* 优先级最大*/

         color:blue;

      }

</style>

</head>

<body>

    <div id="redp">

        <p>!important测试</p>

    </div>

</body>

</html>

在火狐，IE10，Chrome浏览器页面显示结果如下：

<p>标签里的内容显示为红色

其他补充：

1.选择器的权值越大优先级越高；

2.当权值相等时，后出现的样式表设置比先出现的样式表设置优先级高；

3.继承的CSS 样式优先级低于后来指定的CSS 样式

4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用，在此就不介绍了。

css优先级机制说明的更多相关文章

  1. css 优先级 机制

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

  2. css优先级机制

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

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

    一.继承与层叠:

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

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

  5. Css的优先级机制

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

  6. CSS 的优先级机制总结

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

  7. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  8. CSS优先级的详细解说

    一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...

  9. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

随机推荐

  1. php session 读写锁

    php session 读写锁 先看一个样例,功能: 1.点击页面中一个button,ajax运行php,php中用session记录运行到哪一步. 2.使用ajax轮询还有一个php,获取sessi ...

  2. 编写高质量代码改善C#程序的157个建议[1-3]

    原文:编写高质量代码改善C#程序的157个建议[1-3] 前言 本文主要来学习记录前三个建议. 建议1.正确操作字符串 建议2.使用默认转型方法 建议3.区别对待强制转换与as和is 其中有很多需要理 ...

  3. JSP简单的练习-使用JDOM阅读xml文件

    <%@ page contentType="text/html; charset=gb2312" language="java" %> <%@ ...

  4. Html.Partial和Html. RenderPartial

    圣殿骑士-蓝剑行动 Html.Partial和Html. RenderPartial用法 Html.Partial和Html. RenderPartial用法 Html.partial和RenderP ...

  5. 关于接收POST请求 $GLOBALS['HTTP_RAW_POST_DATA']

    总是产生变量包含有原始的 POST 数据.否则,此变量仅在碰到未识别 MIME 类型的数据时产生.不过,访问原始 POST 数据的更好方法是 php://input.$HTTP_RAW_POST_DA ...

  6. 自己动手写CPU 笔记

    自己动手写CPU 跳转至: 导航. 搜索 文件夹 1 处理器与MIPS 2 可编程逻辑器件与Verilog HDL 3 教学版OpenMIPS处理器蓝图 4 第一条指令ori 5 逻辑.移位与nop ...

  7. C++ Regsvr32订购具体解释

    一.Regsvr32命令 Regsvr 32命令是Windows在控制文件(如延长DLL.OCX.CPL文件)注册和反注册工具. 命令格公式:Regsvr32 [/s] [/n] [/i[:cmdli ...

  8. Windows Server 2008 网管数据采集 努力做“日拱一卒“

    Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html Windows Serve ...

  9. 35,000FT大气压力的问题

    原来的问题:压力在喷气客机的飞行FL350(35,000脚)大约210mmHg.这是个大气压的数量? 在每平方英寸磅? 多少帕斯卡尔? http://wenwen.sogou.com/z/q33797 ...

  10. Linux而不必进入password登陆自己主动sshserver方法

    使用OpenSSH在linux通过登陆sshserver时间,系统会提示您输入每次password,和用途vim 的netrw保存编辑后的每一个变化必须失去远程文件时,插件password,很多麻烦. ...