WEB学习-兼容问题

最新推荐文章于 2021-10-27 22:18:54 发布

一人前行

最新推荐文章于 2021-10-27 22:18:54 发布

阅读量98

点赞数

分类专栏： WEB学习小记

本文链接：https://blog.csdn.net/lyz0925/article/details/87778744

版权

WEB学习小记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>
紧挨着的第一个兄弟。
    <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>