02_03.常用选择器

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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章