IE6中使用通用选择器模拟子选择器效果

最新推荐文章于 2023-12-03 19:52:14 发布

weixin_30446613

最新推荐文章于 2023-12-03 19:52:14 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/by-dxm/p/6116311.html

版权

IE6及更低版本不支持高级选择器；IE7有个bug，对于子选择器和相邻同胞选择器，如果父元素和子元素有HTML注释，会出问题。

下面我们使用通用选择器来模拟子选择器的效果。

原理：首先在所有后代上应用你希望的样式，然后使用通用选择器覆盖子元素的后代上的样式。

        <style>
            li{list-style: none;}
            /*#nav>li{background: url(img/head-1.png) no-repeat left center;padding-left: 40px;}*/
            /*以上只会作用于#nav的子元素，由于ie6不支持高级选择器，所以可以使用下面办法*/
            #nav li{background: url(img/head-1.png) no-repeat left center;padding-left: 40px;}
            #nav li *{background-image: none;padding-left: 0;}
        </style>
    </head>
    <body>
        <ul id="nav">
            <li>1</li>
            <li>
                <ul>
                    <li>2-1</li>
                    <li>2-2</li>
                    <li>2-3</li>
                </ul>
            </li>
            <li>3</li>
        </ul>
    </body>