WEB学习-兼容问题

  • css选择器
  1. 儿子选择器 (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>

 

posted @ 2019-02-18 15:38  一人前行  阅读(124)  评论(0编辑  收藏  举报