原文: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. Properties类读写.properties配置文件

    package com.hzk.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFo ...

  2. JNDI数据源配置注意事项

    假设是在原有project上改动 1,applicationContext.xml中改动当中的value值 <bean id="dataSource" class=" ...

  3. DTD验证XML(转)

    1.内部DTD       最简单的使用DTD的方法是在XML文件的序言部分加入一个DTD描述,加入的位置是紧接在XML处理指示之后.一个包含DTD的XML文件的结构为:    <?xml ve ...

  4. HDU 1198 Farm Irrigation （并检查集合 和 dfs两种实现）

    Farm Irrigation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  6. 乐视TV2015校园招聘A第二个大的发行量（of中国Academy科学大学站）

    标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数字.但是一些数字多次出现.有些数字不出现.请设计算法和程序,统计数据不会出现什么.什么号码多次出现.在O(n)时间复杂度,O(1)在完成它的空间复杂 ...

  7. javascript获取浏览器窗口大小办法

    四个属性: 1:outerWidth  2:outerHeight  3:innerWidth  4:innerHeight 经最新版本的浏览器(Chrom IE Firefox Opera)测试,初 ...

  8. java_log4j 经典配置

    程序加载制定日志文件 public static final String log4j = "log4j.xml"; /** * @declare 加载log4j * @throw ...

  9. 编译 & 预处理

    编译(compilation , compile) 1.利用编译程序从源语言编写的源程序产生目标程序的过程. 2.用编译程序产生目标程序的动作. 编译就是把高级语言变成计算机可以识别的2进制语言,计算 ...

  10. .net 控件开发第二天 怎么将 第一天写的代码 用到 .net中来

    前面第一天 我们看到的全是 js的代码,虽然不管是BS的框架是java 还是 php,复用性 还是特别高的,  但是 写起来比较费劲,怎么办,我们能不能 更 简单点呢? 当然可以,这个时候我们就要用到 ...