02_03.常用选择器-CSDN博客

本文链接：https://blog.csdn.net/cigarangle/article/details/26281173

1.class选择器（当多个tag，需要赋予相同的属性的时候，同时使用class选择器控制）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="test/html;charset=utf-8">
		<style type="text/css">
			#box1{width:100px;height:100px;background:red;}
			#box2{width:100px;height:100px;background:red;}
		</style> 
	</head>
	<body>
		<div id="box1">块儿</div>
		<div id="box2">块儿</div>
	</body>
</html>

——————-我是分割线（上下两段代码，显示效果一致）———————

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			.box{width: 100px;height:100px;background:red;}
		</style>
	</head>
	<body>
		<div class="box">块儿</div>
		<div class="box">块儿</div>
	</body>
</html>

2.同一个tag，可以使用多个class选择器

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			.box{width: 100px;height:100px;background:red;}
			.blue{background: blue;}
		</style>
	</head>
	<body>
		<div class="box">.box控制我</div>
		<div class="box blue">.box和.blue同时控制我</div>
	</body>
</html>

3.标签选择器（控制所有一种类型的tag，使其有相同的样式）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			div{width:200px;height:200px;border:solid 2px black;}
			p{width:100px;height:100px;background:red;}
		</style>
	</head>
	<body>
		<div>div控制我<p>p控制我</p></div>
		<p>p控制我</p>
	</body>
</html>

4.子选择器（只控制div 下的，“所有” p标签）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			div p{width:200px;height:200px;background: red; border:solid 2px black;}
		</style>
	</head>
	<body>
		<div><p>div p控制我</p></div>
		<div><h1><p>div p控制我</p></h1></div>
		<p>div p不控制我</p>
	</body>
</html>

5.通用选择器（控制所有tag）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			*{border:solid 2px black;}
		</style>
	</head>
	<body>
		<div>*控制我<p>*控制我</p></div>
		<div>*控制我<h1>*控制我<p>*控制我</p></h1></div>
		<p>*控制我</p>
	</body>
</html>