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>

发表评论