CSS的类名交集复合选择器

最新推荐文章于 2023-09-23 16:33:10 发布

转载最新推荐文章于 2023-09-23 16:33:10 发布 · 185 阅读

本文介绍了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>