WEB学习-兼容问题
- css选择器
- 儿子选择器 (IE7开始兼容,IE6不兼容。)
div>p{ color:red; } div的儿子p。和div的后代p的截然不同。 能够选择: <div> <p>我是div的儿子</p> </div> 不能选择: <div> <ul> <li> <p>我是div的重孙子</p> </li> </ul> </div>
2.序选择器(IE8开始兼容;IE6、7都不兼容)
选择第1个li: <style type="text/css"> ul li:first-child{ color:red; } </style> 选择最后一个1i: ul li:last-child{ color:blue; } 由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名: <ul> <li class="first">项目</li> <li>项目</li> <li>项目</li> <li class="last">项目</li> </ul> 用类选择器来选择第一个或者最后一个: ul li.first{ color:red; } ul li.last{ color:blue; }
3.下一个兄弟选择器(IE7开始兼容,IE6不兼容)
+表示选择下一个兄弟 <style type="text/css"> h3+p{ color:red; } </style> 选择上的是h3元素后面紧挨着的第一个兄弟。 <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3>