CSS样式表的问题是老生常谈了。笔者早在10年前就粗略地接触过一些，那个时候还在上大学^_^。不过，随着时间的推移，好多东西都忘的一干二净。偏偏又自认为已经学过。唉，笔者编写Web UI之时，便总在这些地方犯错误。
下面回顾一下css样式表的冲突问题，基础知识，css高手见笑了。
冲突的来源： css层叠样式表对同一个标签具有多种定义方法，而每种方法的影响范围（顺序、具体性）却有权重之分。
举个例子，现在有一个网页，有若干个段落：
<html>
<body>
<p>我是一个段落，用来演示css样式表冲突问题。</p>
<p>我是第二个段落，用来演示css样式表冲突问题。</p>
</body>
</html>
当我们为它定义css样式表时候可以有多种方法：
-
1、定义html标签P
-
2、定义类class
-
3、定义ID
-
4、直接使用内联属性 style＝“”
案例分析：
<html>
<head>
<style>
body span p {color:pink;}
p {background-color:yellow; color:red;}
p {color:blue;}
//上面的css样式表，人为制造了color的冲突，很明显，更靠近段落的color:blue起了作用
//而第三个段落的css定义确又遵循了具体性的原则，即它在p前指定了须在span内的p，
因此，css不管该样式距离段落的远近。
</style>
</head>
<body>
<p>我是一个段落，用来演示css样式表冲突问题。</p>
<p>我是第二个段落，用来演示css样式表冲突问题。</p>
<span><p>我是第三个段落，用来演示css样式表冲突问题。</p></span>
</body>
</html>
总结下来，根据顺序、具体性原则。当一个HTML元素被多个样式选择器定义并产生冲突的时候，其权重（优先级）排序如下：
id>class>Multi HTML Tag>Single HTML Tag
另外需要注意的一点是：内联样式（style＝“”）的优先级别最高，但现在一般不直接定义某个元素的内联样式。各位读者心中有数就可以了。
3338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
