在平常的CSS书中会有很多种书写方法,如:

#test

.test

#test > .abc

h1.wrap

....

这样的优先级是如何区分的?

2011-01-05 08:51:13

4 Answers

页面解释代码有一个就近原则,也就是最近的css定义决定了以什么形态去显示效果。


几个原则:

原则一:继承不如指定

具体指定某个id或class的属性,要比笼统地继承之前的属性具有更高的优先权。


原则二: #ID > .class > 标签选择符。

id属性优先于class属性,class属性优先于其他标签属性,比如<h1><p>


原则三:越具体越强大

当对某个元素的CSS选择符样式定义的越具体,层级越明确,该定义的优先级就越高。


原则四:标签#id >#id ; 标签.class > .class

拥有指定标签的属性,比笼统的属性优先级高


举个例子:


<style>

.test .abc {color:#ff0000;}

</style>


<!--body code-->

<div class="test">

<span class="abc" style="color:#666;">德问是一个专家驱动的高质知识社交问答</span>

</div>


但实际上输出的字体颜色就是灰色字体,说明执行的是Style的css,而不是.test .abc。

同样的道理,如果按照优先级排序的话,应该是:

#test .abc > #test >.test


h1.wrap当然和#test .abc差不多的性质。


2011-01-05 10:40:28

一、什么是CSS优先级?
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名个数。
最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如:
每个ID选择符(#someid),加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
每个元素或伪元素(:firstchild)等,加0,0,0,1。
其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

三、特性分类的选择符列表
以下是一个按特性分类的选择符的列表:
选择符
特性值
h1 {color:blue;}
1
p em {color:purple;}
2
.apple {color:red;}
10
p.bright {color:yellow;}
11
p.bright em.dark {color:brown;}
22
#id316 {color:yellow}
100
单从上面这个表来看,貌似不大好理解,下面再给出一张表:
选择符
特性值
h1 {color:blue;} 1
p em {color:purple;} 1+1=2
.apple {color:red;} 10
p.bright {color:yellow;} 1+10=11
p.bright em.dark {color:brown;} 1+10+1+10=22
#id316 {color:yellow} 100
通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。
说到这里,我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义:
body {color:#f00;}
举例代码:

CSS继承性的测试


举例效果:


这段代码的应用结果是:“CSS继承性的测试”这段话是红颜色的,“继承性”几个字由于应用了标签,所以是粗体。很显然,这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例:在样式定义中添加一条:
strong {color:#000;}
举例效果:
发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。
有一些属性不能被继承,如:border, margin, padding, background等。
样式定义:
div {border:1px solid #000;}
举例代码:

我是border我是不能被继承滴

预期效果:


实际效果:

从上面的效果中,我们可以看出,border是不能被继承的,还有一些其它的属性也是如此,这里就不一一列举。
五、附加说明
文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如

blah
的样式,而外部定义指经由或有!important声明的规则高于一切。
如果!important声明冲突,则比较优先权。
如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
还需要说一下,IE是可以识别位置错误的@import的,但无论

[原文]

2011-01-05 12:22:42

一般来说,直接在页面元素中使用的样式拥有最优先的优先级,其次是在页面头部定义的CSS样式,最后是用link链接形式调用的CSS样式
类(class)选择符的优先级要高于类型选择符,也就是说首先遵循类选择符再遵循类型选择符。

比如:

p
{
color:red;
}

.mm
{
color:yellow:
}


我是什么颜色啊?

显示为yellow颜色。

id选择符>class选择符

2011-01-05 14:26:43

我感觉优先级问题没有那么复杂的:
1,文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如

blah
的样式,而外部定义指经由或;卷标定义的规则。
2,有!important声明的规则高于一切。
3,如果!important声明冲突,则比较优先权。
4,如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5,由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
6,关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
掌握上面几点,就可以应付平时遇到的大部分问题了


2011-01-05 15:12:02
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制