注意：多类选择符IE6.0以前的版本并不支持，IE7支持。

所以，如果希望在IE6中获得一致的效果，请避免使用多类选择符。

——————————————————————————————————
编辑了。属性选择符IE6也是不支持的。不误导人了。

ie6.0对CSS2.1选择符的支持并不完整。
下面是IE不支持或者支持上存在问题的地方：

子选择符
相邻兄弟选择符
属性选择符
多类选择符
:first-childe伪类
语言伪类
:before和:after伪类
伪类:hover只在a元素中起作用
不支持伪类:focus。对于a元素获得焦点时使用:active

[ 本帖最后由 zeratul1 于 2009-8-13 10:10 编辑 ]

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:03:22 |显示全部楼层

ie6对 .a.b的识别等效于.b

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:06:01 |显示全部楼层

其实可以利用这个，弄一个针对ie6的hack

.xxx.son{} 只要.xxx部分是一个不存在的类名。就可以屏蔽ie6之外的浏览器。只对ie6下的.son有效。
这个hack的效果同 selector{ _property:value; } 大体一致。

当然hack已经够用了，这个我只是提出一种可能路线。

——【@王白Dream】

使用道具举报

loveface　

老吃不饱

183 主题	13 好友	3955 积分

金牌会员

帖子: 779
威望: 2
注册时间: 2002-10-15

发消息

发表于 2009-8-13 10:14:44 |显示全部楼层

应该是div.a.b 生效于 <div class="a b">
div.b 生效于 <div class="a b"> 或 <div class="b">
但IE6, div.a.b和 div.b 是效果一样，可能是IE6理解不了这种class串着写，但愿意读最后一个class。所以div.a.b.c，在IE6下效果就和div.c 一样。
我觉得这样写把自己也容易绕晕了。毕竟IE6是个是个laughable的浏览器，不如直接绕过这个问题。
include一个JS文件，都可以修复IE6对CSS的一些不支持的问题，还把什么max-width啊，透明png啊一并给解决了。多好。

不要浮躁

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:15:19 |显示全部楼层

对于LZ的问题，不改变html，不考虑js,用纯css应该没可能

——【@王白Dream】

使用道具举报

SenFe　楼主

盛飞

79 主题	71 好友	1万积分

钻石会员

帖子: 6299
威望: 14
居住地: 四川省成都市
注册时间: 2005-12-10

发消息

发表于 2009-8-13 10:17:56 |显示全部楼层

写法应该没有错误，最多不好而已，经测试IE7、8，FF，OPERA均支持
现在网上的技术文章到处都一样
http://www.baidu.com/s?ie=gb2312 ... 4%F1%B7%FB&ct=0
文章的最后一句，桉此文作者的说法就支持，所以我就迷糊了

承接程序定制、修改。

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:29:16 |显示全部楼层

算支持不正确吧，

对.a.b起码能认出是.b来。

不知道Eric具体是怎么说的，恐怕有误传

——【@王白Dream】

使用道具举报

SenFe　楼主

盛飞

79 主题	71 好友	1万积分

钻石会员

帖子: 6299
威望: 14
居住地: 四川省成都市
注册时间: 2005-12-10

发消息

发表于 2009-8-13 10:31:31 |显示全部楼层

TO:#7，貌似还是不行，在IE6下面设置多类选择始终会影响另外两个单独的

承接程序定制、修改。

使用道具举报

loveface　

老吃不饱

183 主题	13 好友	3955 积分

金牌会员

帖子: 779
威望: 2
注册时间: 2002-10-15

发消息

发表于 2009-8-13 10:32:59 |显示全部楼层

觉得IE6不支持这个的说法可能不准确。GOOGLE了一下

"IE6 gets this wrong because it doesn't understand that 'alt selected' is a single class. It treats 'alt' and 'selected' as multiple classes instead of the single class it actually is."

Actually, "alt selected" is not a single class, but is indeed 2 separate classes. If you write your css as .alt {} and .selected {}, browsers will apply both classes, as they should. In our example, the .selected class will overrule the .alt class simply because of the cascade order. However, when we write our CSS as a subset class (chain of classes [.alt.selected]), it should only apply if both classes exist on the element. IE disregards this, and will apply the .alt.selected styles to an element as long as it has the .selected class.

请特别特别留意这一句 “ .selected class will overrule the .alt class simply because of the cascade order. ” 就是后面的把前面的overrule了。这也算是支持吧。只是FF和IE6理解的支持是不一样的。象文章里说的IE6理解的alt selected这个概念就和别人不一样。

[ 本帖最后由 loveface 于 2009-8-13 10:38 编辑 ]

不要浮躁

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:33:27 |显示全部楼层

回复 12# SenFe [楼主] 的帖子

7#和LZ问题无关，

算是我离题了

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:37:55 |显示全部楼层

我看到IE disregards this

使用道具举报

14px　

秋末

41 主题	42 好友	4494 积分

荣誉管理

帖子: 1615
威望: 52
居住地: 湖南省长沙市
注册时间: 2006-3-1

发消息

发表于 2009-8-13 10:40:58 |显示全部楼层

看来我是书读少了，因为ie6的不支持少了解了很多东西。
ie6的hack很多了，做不做hack用貌似不是什么很重要的问题。
想了解一下，假设所有的浏览器对该写法完美支持，那这个写法的实际用途是？

我的博客（14px.com）我的微博（t.qq.com/qweibo）

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 10:42:51 |显示全部楼层

回复 16# 14px 的帖子

用途就是可以解决LZ的问题

使用道具举报

SenFe　楼主

盛飞

79 主题	71 好友	1万积分

钻石会员

帖子: 6299
威望: 14
居住地: 四川省成都市
注册时间: 2005-12-10

发消息

发表于 2009-8-13 11:10:45 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css"><!--
html {min-width: 776px;}
body {margin: 0px;padding: 0px;border: 0px;color: #333;font-size: 12px;text-align: center;font-family: 'lucida grande','lucida sans unicode','宋体','新宋体',arial,verdana,sans-serif;}
a:link {color: #1c7bb4;text-decoration: none;}
a:visited {color: #1c7bb4;text-decoration: none;}
a:hover {color: #e43012;text-decoration: underline;}
a:active {color: #1c7bb4;text-decoration: none;}
#head {clear: both;width: 776px;margin: 5px auto 0;}

#nav ul {
	clear: both;
	list-style: none;
	height: 28px;
	_overflow: hidden;/*对ie6及以下有效*/
	padding: 0;
	margin: 5px 0px;
	border-bottom: 1px solid #8aa9bb;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 1px;
	background-color: #d7ebf6;
}
#nav a {
	float: left;
	width: 74px;
	height: 27px;
	border: 1px solid #d7ebf6;
	border-bottom: none;
	line-height: 27px;
	font-weight: bold;
}
#nav a.home{border-color: #d7ebf6;}
#nav a:hover,
#nav a.default {
	border: 1px solid;
	border-color: #8aa9bb #8aa9bb #fff;
	background-color: #fff;
	text-decoration: none;
	_position: relative;/*对ie6及以下有效*/
}
#nav a .cn{display:none;}
#nav a:hover .cn{display:inline;}
#nav a:hover .en{display:none;}
#nav a.home:hover,#nav a.home.default {border-bottom: 1px solid #8aa9bb;}
--></style>
</head>
<body>
<div id="head">
	<div id="nav">
		<ul>
			<li><a href="#" class="home default"><span class="en">Home</span><span class="cn">首 页</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#" class="default"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
			<li><a href="#"><span class="en">Meunu</span><span class="cn">栏 目</span></a></li>
		</ul>
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

.home和.defautl实际用的时候分别只有一个，.home是国定在第一个的，.default有可能在任何一个a当中，除了IE6，其它浏览器显示的都是正常效果（测试的时候还要把第一个a中的default去掉测试），抛开这个多类选择符的问题不谈，就算使用了两个hack，仍然问题多多，不能保证IE和其它浏览器效果一样，郁闷，实在不行就只有想另外的方法了。

[ 本帖最后由 SenFe 于 2009-8-13 11:19 编辑 ]

承接程序定制、修改。

使用道具举报

birdstudio　

CSS魔术师

7 主题	4 好友	5036 积分

荣誉管理

帖子: 2451
威望: 4
注册时间: 2008-12-19

发消息

发表于 2009-8-13 11:22:26 |显示全部楼层

只能用 JS 来弥补这个 bug 了。

使用道具举报

zeratul1　

梨果凛

2 主题	0 好友	464 积分

中级会员

帖子: 108
威望: 1
注册时间: 2009-4-16

发消息

发表于 2009-8-13 12:02:37 |显示全部楼层

to #13 感谢贴出这么详细的解释。理解更透彻了。

#17 绝对是在强力吐槽呀。

多类选择符嘛，可以使CSS选择元素的时候更灵活。
css3中又增加了不少新的选择符呢。
JQuery也在不断改进选择符，而且是作为优化的核心。

话又说回来了，不是所有的浏览器都能正确解释作为标准的CSS选择符，
所以嘛，很多时候咱们其实没办法灵活的使用各种选择符。
我的想法是，多多益善，灵活简便。
当然了，要能在尽量多的浏览器中有一致的解释和相同的呈现结果。

#8的意见很好吧。楼主说明了不要改动HTML，我们可以理解不改变文档中的标签属性和结构吧。
所以嘛，加段JS搞定IE6也是可以接受的吧。至于是不是合适嘛，看具体情况吧。

比如这样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<style type="text/css"></style>
</head>
<body>
<div class="a b"></div>
<div class="a"></div>
<div class="b"></div>
<script type="text/javascript">
//<![CDATA[
fn02();
//判断浏览器类型
function fn02(){
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
		
        if (Sys.ie == '6.0') {
             fn01();
        }
}
//对设置了多个类的div元素定义样式
function fn01(){
  var o = document.getElementsByTagName("div");
  for (var i=0;i<o.length;i++){
    if(o[i].className=="a b"){
      o[i].style.background = "#f00";
    }
  }
}
//]]>
</script></body>
</html>

提示：您可以先修改部分代码再运行

动手写的时候再次注意到，IE6不是不认识多类选择符，而是对多类选择符的解释错误。
在CSS中增加了针对IE6的hack，相当于是在ie6中，多类选择符仅仅重复定义了一遍最后一个类选择符的样式。
js嘛，就是判断浏览器类型，然后针对IE6找到多类选择符的元素，定义需要的样式了。

不是很完善，意思差不多。
我这儿看了IE6,IE7,IE8,FIREFOX,CHROME,SAFARI,OPEAR,应该可以的。

使用道具举报

ONEBOYS　

步舞之鹤

70 主题	42 好友	5233 积分

钻石会员

帖子: 1940
威望: 20
居住地: 浙江省杭州市
注册时间: 2007-6-2

发消息

发表于 2009-8-13 12:39:26 |显示全部楼层

呃，其实我#17说的意思是，可以解决LZ这种，只用2个class名就能定义3个元素的样式，并且，还能统一样式一起定义（.a和.b），区别样式特定定义（.a.b）。尽管用到的情况比较少，但的确比较灵活。

我想，LZ说不动html，应该不是说真的不能动，而是想了解这个选择符而已（免得下面立马喊着改class了），所以要真的加js，LZ估计也不想要。

说到那jquery的选择符，还真是强大啊。

——【@王白Dream】

使用道具举报

返回列表

帐号		自动登录	找回密码
密码			注册

[求助] 关于IE6多类选择符

回复 12# SenFe [楼主] 的帖子

回复 16# 14px 的帖子

浏览过的版块