CSS——其他选择器（交集/并集/儿子/序）

最新推荐文章于 2024-11-05 11:09:55 发布

原创最新推荐文章于 2024-11-05 11:09:55 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文详细介绍了不同版本的IE浏览器及其兼容性问题，并针对特定的选择器提供了详细的解释与使用示例，帮助开发者解决常见浏览器兼容性难题。

Pre
浏览器兼容问题：
IE：微软的浏览器，随着操作系统安装的，所以每个window都有IE浏览器。
windows xp操作系统安装的IE6
windows vista操作系统安装的IE7
windows 7操作系统安装的IE8
windows 8操作系统安装的IE9
windows10操作系统安装的edge
一般来说IE6、7由于版本低级，经常存在浏览器的兼容问题。

1.交集选择器，如：

h3.special｛
	color:red;
｝

选择的元素需同时满足两个条件——必须是h3标签，且必须是special标签。
交集选择器没有空格，所以div.red和div .red不是同一个意思。

交集选择器可以连续交，虽然一般并不这么写。

	h3.special.zhongyao{
		color:red;
	}

2.并集选择器（分组选择器）：用逗号表示

h3,li{
	color:red;
}

3.通配符： *表示所有元素：

*{
	color:red;
}

效率不高。页面上的标签越多，效率越低，所以页面上不太可能出现这个选择器。

4.儿子选择器：IE7开始兼容，IE6不兼容

	<style type="text/css">
		div>p{
			color:red;
		}
	</style>
</head>
<body>
	<div>
		<p>猜猜我是什么颜色</p>
	</div>
</body>

p标签相当于div标签的儿子。

以下情况无法选择，因为div的儿子是ul，不是p：

	<style type="text/css">
		div>p{
			color:red;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>
				<p>猜猜我是什么颜色</p>
			</li>
		</ul>
	</div>
</body>

5.序选择器：IE8开始兼容，IE6、7都不兼容。

	<style type="text/css">
		ul li:first-child{
			color:red;
		}
	</style>
</head>
<body>
	<ul>
		<li>item</li>
		<li>item</li>
		<li>item</li>
	</ul>
</body>

若是选择最后一个li，则ul li: last-child；选择第n个li，则ul li: nth-child。
由于浏览器更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名，我们可以用类选择器来选择第一个或最后一个：

	ul li.first{
			color:red;
	}
	ul li.last{
			color:blue;
	}

6.下一个兄弟选择器：IE7开始兼容，IE6不兼容。+表示选择下一个兄弟

	<style type="text/css">
		h3+p{
			color:red;
		}
	</style>
</head>
<body>
		<h3>这是一个标题</h3>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<h3>这是一个标题</h3>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
</body>

如果CSS选择器：
div.content div.news ul li.first{

}
则：
< div class="content">
	< div class="news">
		< ul>
			< li class="first">< /li>
			< li>< /li>
			< li>< /li>
			< li>< /li>
		< /ul>
	< /div>
</div>