css优先级汇总

简介: 原文:css优先级汇总  我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题。   多重样式优先级:当内联样式、内部样式和外部样式作用于同一个元素时,属于多重样式的范畴。
原文: css优先级汇总

  我所理解的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跟没用是一样的效果*/

 

目录
相关文章
|
1月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
4月前
|
人工智能 前端开发 Cloud Native
css选择器有哪些?优先级?哪些属性可以继承?
css选择器有哪些?优先级?哪些属性可以继承?
|
7月前
|
XML 前端开发 数据格式
CSS引入方式这么多是什么优先级?
CSS引入方式这么多是什么优先级?
50 0
|
3月前
|
XML 前端开发 UED
提升代码质量:如何遵循 CSS 优先级和最佳实践
提升代码质量:如何遵循 CSS 优先级和最佳实践
|
8月前
|
前端开发
【css选择器有哪些?优先级?哪些属性可以继承?】
【css选择器有哪些?优先级?哪些属性可以继承?】
|
4月前
|
前端开发 算法
css 选择器有哪些?优先级?哪些属性可以继承?
css 选择器有哪些?优先级?哪些属性可以继承?
28 0
|
5月前
|
前端开发 容器
css选择器有哪些?优先级?哪些属性可以继承?
css选择器有哪些?优先级?哪些属性可以继承?
72 0
|
6月前
|
前端开发
CSS选择器优先级
CSS选择器优先级
38 0
|
6月前
|
前端开发
CSS 选择器权重计算与优先级
CSS 选择器权重计算
52 0
CSS 选择器权重计算与优先级