css样式权,css样式规则

css的三种样式中哪种样式的优先级最高

css样式采取的就近样式原则。

成都创新互联公司长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为洛宁企业提供专业的成都网站建设、网站设计，洛宁网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

行内样式div style=""/div优先级最高，没有行内样式那么会回在页答面找style/style内嵌样式。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

扩展资料：

易于使用和修改：

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中。

参考资料来源：百度百科-CSS

怎么给组件中的CSS样式加权?（屏蔽组件外CSS样式对它的影响）

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：

选择符 语法 示例 特性

通配选择符 * *{ width:560px;} 0,0,0,0

类型选择符 E1 td { font-size:12px;} 0,0,0,1

伪元素选择符 :first-line :first-line{ font-size:12px;} 0,0,0,1

伪类选择符 :link :link { font-size:12px;} 0,0,1,0

属性选择符 [attr] [title] {color:blue;} 0,0,1,0

ID选择符 #ID #test{ font-size:12px;} 0,1,0,0

类选择符 E1.className .test{color:blue;} 0,0,1,0

子对象选择符 E1 E2 body p {color:blue;} E1+E2

相邻选择符 E1 + E2 div + p {color:blue;} E1+E2

选择符分组 E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3

包含选择符 E1 E2 table td {color:blue;} E1+E2

规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：div style=”color: red”test/div

外部定义指经由link或style标签定义的规则；

2.!important声明的Specificity值最高；

3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加，

{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity，

然后在比较取舍时按照从左到右的顺序逐位比较

———-以上内容都是权重理论上的知识，按理说支持css2.1的浏览器应该都遵循———-

IE6和IE7却不完全是那么回事；这里说的IE7排除掉IE8的兼容模式。

1

2

3

4

5

6

7

8

a { /* 权重为[0,0,1] */

color: #00f;

background-color: #ff0;

}

a:hover { /* 权重为[0,1,1] */

color: #ff0;

background-color: #00f;

}

蓝色字，黄色背景，鼠标悬停的时候颜色颠倒

接下来，在添加规则

1

2

3

4

5

p a.cl1 { /* 权重为[0,1,2] */

color: #f00;

background-color: #0ff;

}

pa class="cl1" href="#".../a/p

红色字，浅绿色背景，权重为 [0,1,2], 比第一条权重高

在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说，权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)

1

2

3

4

5

.cl2 a.cl3 { /* 权重为 [0,2,1] */

color: #f00;

background-color: #0ff;

}

p class="cl2"a class="cl3" href="#".../a/p

红色字，浅绿色背景，权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高

现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]

1

2

3

4

5

div p :hover { /* 权重为 [0,1,2] */

color: #f00;

background-color: #0ff;

}

divpa href="#".../a/p/div

当鼠标悬停在链接上的时候是红色字，浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高

第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的，但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖

演示地址：IE6/Win: 关于伪类:hover的权重问题

IE6/win下伪类:visited也存在类似问题，不再赘述，演示地址：IE6-/Win: 关于伪类:visited的权重问题

还有其他一些，在IE67下都会产生错误权重的情况，其他浏览器有条件的请帮忙测试一下：

1

2

3

4

5

6

7

p.c12 {/* 权重为[0.1.1] */

color: #c00;

}

div .c12 {/* 权重为[0.1.1] */

color: #090;

}

divp class="c12"el.class (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el .class (red), el.class (green)，就是正确的了

1

2

3

4

5

6

7

div .c24 {/* 权重为[0.1.1] */

color: #009900;

}

.c23 p {/* 权重为[0.1.1] */

color: #CC0000;

}

div class="c23"p class="c24".class el (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el .class (red), .class el (green)，就是正确的了

1

2

3

4

5

6

7

div #c28 {/* 权重为[1.0.1] */

color: #009900;

}

#c27 p {/* 权重为[1.0.1] */

color: #CC0000;

}

div id="c27"p id="c28"#id el (red), el #id (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el #id (red), #id el (green)，就是正确的了

:first-letter使用的比较少，这个例子就不写了

1

2

3

4

5

6

7

8

p.c31 {/* 权重为[0.1.1] */

color: #c00;/* red */

}

body p.c31 {/* 权重为[0.1.2] */

color: #090;/* green */

color: miao;  /* 故意的错误 */

}

p class="c31"在IE67下会错误显示红色/p

演示地址：其他权重错误

CSS样式中多种样式进行叠加，哪个的权限高

一般情况是内联样式级别最高，内嵌其次，外部最低，如果同一元素在三个样式中都有设定则为多重样式的情况

在选择器的情况下，内联样式的权重是1000，ID选择器的权重是100，class选择器的权重是10.标签选择器的权重是1，

如果权重相同则使用就近原则，后大于前

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

如何让自己写的css样式权重大于js控制的css

可以这样试试：

js不直接控制css样式，如：.css('width','100px')，而是控制dom去获得什么样的class类,如：.attr('class','this_class that_class')，这样关于css优先级又回到了css里