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>
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。