CSS的类名交集复合选择器

“交集”复合选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。

注意其中第一个必须是标记选择器，如p.class1，但有时候会看到.class1.class2，即2个都是类选择器，在其他浏览器中是允许出现这种情况的，但IE6不兼容。如下表：

两个类选择器的“交集”复合选择器浏览器支持表：

 

Mac: Safari 4.0 支持
Mac: Chrome 5.0 支持
Mac: FireFox 3.6 支持
Mac: Opera 10 支持
Win: FireFox 3.6 支持
Win: Opera 10 支持
Win: IE6 不支持
Win: IE7 支持
Win: IE8 支持

实例demo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
body{padding:50px;}
*{padding:0;margin:0;color:#fff;text-decoration:none;list-style:none;font-family:"微软雅黑"}
li{width:300px;height:80px;line-height:80px;text-align:center;}
.classone{background:#f00;}
.classone.classtwo {background:#090}
.classtwo{background:#009}

</style>
</head>

<body>
    <ul>
        <li class="classone"><a href="#">classone红色的</a></li>
        <li class="classone classtwo"><a href="#">classone and classtwo 绿色的</a></li>
        <li class="classtwo"><a href="#">classtwo蓝色的</a></li>
    </ul>
</body>
</html>

效果图:

 

posted @ 2013-01-22 15:23  穆乙  阅读(5892)  评论(0)  编辑  收藏  举报