CSS-层级选择器的用法

作者

1.组合选择器（选择器1,选择器2,选择器3,……）

　　可以同时使用多个选择器，中间以“,”号分割。下述代码中，span标签、class样式和ID样式，都会被选择。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>

		span,.c1,#i1{
			
			color: #ff0000;
		}


	</style>
</head>

<body>
	<div class="c1">TEST1</div>
	<div id="i1">TEST2</div>
	<span>TEST3</span>
</body>
</html>

2.包含选择器 （选择器1 选择器2）

　　选择“选择器1”里所有子层含有“选择器2”的标签，无视层级关系。

　　下述代码中，内容二和内容三都能被应用样式，而内容一则不行。因为内容一的B标签没有被DIV标签所包含。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>
		div b{
			color:#ff0000;
		}
	</style>
</head>

<body>
	<b>内容一</b>
	<div><b>内容二</b></div>
	<div><span><b>内容三</b></span></div>
</body>
</html>

3.子选择器（选择器1>选择器2>选择器3…）

　　会严格按照选择器层级关系去选择标签。

　　下属代码中，只有内容二才能被应用到样式，因为内容二的标签关系和样式里的选择器关系严格对等。



<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>
		div > b{
			color:#ff0000;
		}
	</style>
</head>

<body>
	<b>内容一</b>
	<div><b>内容二</b></div>
	<div><span><b>内容三</b></span></div>
</body>
</html>

4.相邻选择器（选择器1 ＋ 选择器2）

　　只能选择紧邻“选择器1”之后的评级选择器“选择器2”，不能选择有层级关系的选择器。

　　下述代码中，只有内容五才能被样式所应用到。因为只有它是紧邻着DIV并且非DIV子类的B标签。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>
		div + b{
			color:#ff0000;
		}
	</style>
</head>

<body>
	<b>内容一</b>
	<div><b>内容二</b></div>
	<hr />
	<b>内容三</b>
	<div><span><b>内容四</b></span></div>
	<b>内容五</b>
</body>
</html>

5.兄弟选择器（选择器1 ~ 选择器2）

　　选择“选择器1”之后的平级“选择器2”，并且无视距离远近。

　　下述代码中，内容三和内容五都能被应用到样式。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>
		div ~ b{
			color:#ff0000;
		}
	</style>
</head>

<body>
	<b>内容一</b>
	<div><b>内容二</b></div>
	<hr />
	<b>内容三</b>
	<div><span><b>内容四</b></span></div>
	<b>内容五</b>
</body>
</html>

发表评论