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

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>

 

posted @ 2016-11-30 09:23  党兴明  阅读(456)  评论(0)  编辑  收藏  举报