当前位置:首页 > 开发 > Web前端 > Css > 正文

css优先级机制说明

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要: 原文: css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="
原文: 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优先级机制说明

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
CSS 的优先级机制[总结] - 钢钢 - 博客园 CSS 的优先级机制[总结] 样式的优先级 多重样式(Multiple
1、样式的优先级 内联样式 > 内部样式 > 外部样式 以下的特例:外部样式会覆盖内部样式(不推
最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外
 在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(Casc
一般情况下,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我
用CSS这么些年,从来没从算法级别考虑过它的优先级原理,只是凭经验记住类似“id最大,class其次”
原文: css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>c
最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外
background-attachment: fixed 随着页面的滚动轴背景图片不会移动 background-attachment: scroll
我们都知道css有3种基本设置方式即 1、行内也叫嵌入式 例如: <div style='background:red'>&
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号