手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >IE6对多个CSS样式的解析
IE6对多个CSS样式的解析
摘要:测试代码IE6对多个CSS样式的解析body{font-size:12px;}.West{color:Green;}.West.Color{...

测试代码

<html>

<head>

<title>IE6对多个CSS样式的解析</title>

<style type="text/css">

body { font-size:12px; }

.West { color:Green; }

.West.Color { color: Red; }

</style>

</head>

<body>

<p>大师兄,师傅被妖怪抓走了。</p>

<p>二师兄,师傅被妖怪抓走了。</p>

<p>大师兄,二师兄被妖怪抓走了。</p>

<p>大师兄,师傅和二师兄被妖怪抓走了。</p>

<p>师傅放心吧,大师兄会来救我们的。</p>

</body>

</html>

解析效果

IE6对多个CSS样式的解析1

测试代码

增加了新的样式

<html>

<head>

<title>IE6对多个CSS样式的解析</title>

<style type="text/css">

body { font-size:12px; }

.West { color:Green; }

.West.Color { color: Red; }

.East.Color { color: Blue; }

</style>

</head>

<body>

<p>大师兄,师傅被妖怪抓走了。</p>

<p>二师兄,师傅被妖怪抓走了。</p>

<p>大师兄,二师兄被妖怪抓走了。</p>

<p>大师兄,师傅和二师兄被妖怪抓走了。</p>

<p>师傅放心吧,大师兄会来救我们的。</p>

</body>

</html>

解析效果

IE6对多个CSS样式的解析2

如果样式改成这样

<html>

<head>

<title>IE6对多个CSS样式的解析</title>

<style type="text/css">

body { font-size:12px; }

.West { color:Green; }

p.West.Color { color: Red; }

.East.Color { color: Blue; }

</style>

</head>

<body>

<p>大师兄,师傅被妖怪抓走了。</p>

<p>二师兄,师傅被妖怪抓走了。</p>

<p>大师兄,二师兄被妖怪抓走了。</p>

<p>大师兄,师傅和二师兄被妖怪抓走了。</p>

<p>师傅放心吧,大师兄会来救我们的。</p>

</body>

</html>

解析结果,原来在IE6中显示为蓝色的都显示为红色。而FF保持不变。

结论

在IE6中,连续拼写的两个样式,.class_1.class_2,识别为后一个.class_2。后定义的优先。

在FF中,必须匹配完整的样式,少一个都不识别。

如果加上了p限定,则优先级高于不加p的样式,参考CSS优先级。

【IE6对多个CSS样式的解析】相关文章:

CSS常用样式效果

鼠标移入移出改变CSS样式的小例子

对CSS3选择器的研究(详解)

另一个CSS图片替换的技巧

CSS样式表中的类

CSS样式:background-position的理解

CSS的十八般技巧

了解CSS的查找匹配原理

CSS样式表使用的技巧

DIV CSS隐藏内容样式方法大全

精品推荐
分类导航