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

css优先级汇总

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要:   我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题。   多重样式优先级:当内联样式、内部样式和外部样式作用于同一个元素时,属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。 <head> <link href="style.css" rel="stylesheet"

  我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题。

  多重样式优先级:当内联样式、内部样式和外部样式作用于同一个元素时,属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。

<head>

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

/*.color{color:red;}外部样式*/

<style>/*内部样式*/

.color{color:black;}

<style/>

</head>

<body>

  <a href="" class="color" style="color:blue">我爱变色</a>

  /*内联样式*/

</body>

/*不出意外的话,应该显示为蓝色,前提是内部样式要放在外部样式的后面*/

  选择器的优先权:不同种类的选择器通过权值来计算其优先权的大小。

权值大小:

1.内联样式权值最高为[1000];

2.id选择器权值为[0100];

3.class、属性、伪类选择器权值为[0010];

4.元素标签、伪元素选择器权值为[0001];

5.通用选择器权值为[0000];

解释:权值是一个4位的数字串,从左到右,一级大于一级,每一级之间没有进制,不可跨越。在进行权值比较的时候,应该从左到由进行比较。

<style type="text/css">

.contain .box p{color:red}/*权值:0010+0010+0001=0021*/

.contain div p{color:black}/*权值:0010+0001+0001=0012*/

</style>

<div class="contain">

  <div class="box">

     <p>颜色</p>

  </div>

</div>

/*p标签内容应该为红色*/ 

  CSS 优先级法则:

A  选择器都有一个权值,权值越大越优先;

B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

D  继承的CSS 样式不如后来指定的CSS 样式;

E  在同一组属性设置中标有“!important”规则的优先级最大

 

<style type="text/css"> 

    div{background: red !important; background: blue}

</style> ­
/*显示为红色,ie6显示为蓝色,在ie6下,!important跟没用是一样的效果*/

 

css优先级汇总

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1、样式的优先级 内联样式 > 内部样式 > 外部样式 以下的特例:外部样式会覆盖内部样式(不推
最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外
 在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(Casc
一般情况下,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我
用CSS这么些年,从来没从算法级别考虑过它的优先级原理,只是凭经验记住类似“id最大,class其次”
CSS 的优先级机制[总结] - 钢钢 - 博客园 CSS 的优先级机制[总结] 样式的优先级 多重样式(Multiple
原文: css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>c
最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外
IE css hack汇总 hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) * *color Yes Yes Yes Yes N
IE css hack汇总 hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) * *color Yes Yes Yes Yes N
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号