原文: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. CentOS7 安装Hbase集群

    继续接上一章,已安装好Hadoop集群环境 http://www.cnblogs.com/dopeter/p/4612232.html 在此基础上继续安装Hbase集群 Hbase版本为1.0.1.1 ...

  2. oracle PL/SQL（procedure language/SQL）程序设计之函数+过程+包（转）

    匿名PL/SQL块回顾 DECLARE (可选)     定义在PL/SQL块中要使用的对象 BEGIN (必须)     执行语句 EXCEPTION (可选)     错误处理语句 END; (必 ...

  3. git 如何让单个文件回退到指定的版本

    1.进入到文件所在文件目录,或者能找到文件的路径查看文件的修改记录 1 $ git log MainActivity.java 结果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  4. 使用 CodeIgniter 框架快速开发 PHP 应用(七)

    原文:使用 CodeIgniter 框架快速开发 PHP 应用(七) CodeIgniter 和对象这是玩家章节.它讲述的是 CodeIgniter 的工作原理,也就是揭开CI头上'神秘的面纱'.如果 ...

  5. 大数据系列修炼-Scala课程07

    由于昨天下班后有点困,就没有来及写博客,今天会把它补上!把这个习惯坚持下去! 关于Scala高阶函数详解 1.Scala高阶函数代码实现:高阶函数就是在我们函数中套用函数 2.高阶函数代码详解:高阶函 ...

  6. CII-2.4指针常量和常量指针

    #define T Stack_T typedef struct T *T; struct T { int count; struct elem { void *x; struct elem *lin ...

  7. 解决VS 于 致命错误 RC1015: 无法打开包含文件 &#39;afxres.h&#39; 问题

    在试验VS2010当一个问题困扰了我,它是开放的c++项目达产后,rc的dialog入口.您不能拖动控制,让我疯狂... 而最有发言权的是在线Directions问题. .题明显不是这个问题. 于是我 ...

  8. 使用myeclipse将Javaj项目标ar套餐邂逅classnotfound解决问题的方法

    做一件事的今天,该Java项目打包成jar文件.折腾2小时,最终运行jar文件报告classnotfound异常,我觉得程序写入依赖jar包不玩成,但是,我手动添加.或不.网上找了很多办法.或不.后. ...

  9. IOS数组排序等

    一.UITextField的代理方法 #pragma mark 当文本框开始编辑的时候调用---开始聚焦 - (void)textFieldDidBeginEditing:(UITextField * ...

  10. Python学习笔记：概要

    1.print不同的互动解释语句输出和输出 在以下示例,我们分配字符串值到可变myString.先用print 要显示一个变量的内容, 其次是变量名,以显示. >>> myStrin ...