原文: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. Codeforces 487C. Prefix Product Sequence 逆+结构体

    意甲冠军: 对于数字n, 他询问是否有1~n置换 这种布置能够在产品上模每个前缀n 有可能0~n-1 解析: 通过观察1肯定要在首位,n一定要在最后 除4意外的合数都没有解 其它质数构造 a[i]=i ...

  2. 关于Java和.NET之间的通信问题（JSON）

    前言: 最近项目在某XX领导的所谓指引下,非要转型Java,转就转吧,在转的过程前期是个痛苦期,特别.NET旧有项目和Java新项目需要通信时. 进入主题,Java和.NET之间需要通信,这时媒介很多 ...

  3. 皴linux rootpassword（方式：重置rootpassword）

    皴linux rootpassword: 开机后,.点击"e"进入维护模式.选"内核选项",例如,看到下面的数字: watermark/2/text/aHR0c ...

  4. 【Hibernate步步为营】--复合主键映射具体解释

    上篇文章讨论了继承映射,它是对象模型中最主要的特性,对于继承映射它的主要区分是字段类型的不同,所以在生成表结构时须要有新列来标识数据的类型,能够使用<subclass>标签并在标签中加入d ...

  5. 玩转Linux之- CentOS 7.0，启用iptables防火墙

    原文 玩转Linux之- CentOS 7.0,启用iptables防火墙 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall:sy ...

  6. 二叉搜索树（Binary Search Tree）--C语言描述(转)

    图解二叉搜索树概念 二叉树呢,其实就是链表的一个二维形式,而二叉搜索树,就是一种特殊的二叉树,这种二叉树有个特点:对任意节点而言,左孩子(当然了,存在的话)的值总是小于本身,而右孩子(存在的话)的值总 ...

  7. 平均得分 【杭州电-HDOJ-2023】 附加题+详细说明

    /* 平均得分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  8. POJ 2352 &amp;&amp; HDU 1541 Stars (树状数组)

    一開始想,总感觉是DP,但是最后什么都没想到.还暴力的交了一发. 然后開始写线段树,结果超时.感觉自己线段树的写法有问题.改天再写.先把树状数组的写法贴出来吧. ~~~~~~~~~~~~~~~~~~~ ...

  9. 获取调用者Class和method、反射获取get方法、获取注解信息

    调用者Class 及 method StackTraceElement stacks[] = Thread.currentThread().getStackTrace(); for (StackTra ...

  10. Spring + Spring MVC + Hibernate

    Spring + Spring MVC + Hibernate项目开发集成(注解) Posted on 2015-05-09 11:58 沐浴未来的我和你 阅读(307) 评论(0) 编辑 收藏 在自 ...