css3层次选择器怎么用

本篇内容主要讲解“css3层次选择器怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3层次选择器怎么用”吧!

成都创新互联公司专注于南康网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供南康营销型网站建设，南康网站制作、南康网页设计、南康网站官网定制、微信小程序定制开发服务，打造南康网络公司原创品牌,更为您提供南康网站排名全网营销落地服务。

用法：1、后代选择器选择元素的后代元素，语法“元素元素{css代码}”；2、子选择器选择元素的所有子元素，语法“元素>元素{css代码}”；3、相邻兄弟选择器选择元素同级目录的下一个元素；4、通用兄弟选择器选择元素同级目录下所有后面的标记。

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3层次选择器的用法是什么

层次选择器通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下：

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E > F	子选择器	选择匹配的F元素，且匹配的F元素师所匹配的E元素的子元素
E + F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E ~ F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

IE7以及以上版本的浏览器包括其他各类浏览器都支持层次选择器。（IE6不支持）

下面通过一个HTML文件说明各类层次选择器的使用方式：

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>使用CSS3层次选择器</title>
		<style type="text/css">
			* {margin: 0; padding: 0}
			body {width: 300px; margin: 0 auto;}
			p {margin: 5px;padding: 5px;border: 1px solid #ccc;}
		</style>		

	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4
			<p>5</p>
			<p>6</p>
		</p>
		<p>7
			<p>8
				<p>9
					<p>10</p>
				</p>
			</p>
		</p>
	</body>
</html>

显示效果如下：

css3层次选择器怎么用