2020-05-15----CSS中的选择器（1）_dreamweaver2020中css类选择器-CSDN博客

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/105955599

CSS中的选择器（1）

选择器（8种）

内部样式，写在style标签里。
1./*通配选择器 */

	 *{
		margin: 0;
	}

2./*标签选择器 */

	div{
		width: 100px;
		height: 100px;
		background-color: red;	
	}

3./*id选择器 */

	#box{
		width: 100px;
		height: 100px;
		background-color: tan;
	}

4./*类型选择器 */

	.box1{
		width: 200px;
		height: 200px;
	}

5./*群组选择器 */

	.box2,.box3{
		border-radius: 100px;
	}

6-8种下一遍博文 link.

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--style标签，内部样式-->
	<style type="text/css">
		/*通配选择器*/
		*{
			margin: 0;
		}
		
		/*
		 内联样式大于内部样式
		 内联样式中存在的属性 在内部样式中是不可以被改变的
		 * */
		/*标签选择器*/
		div{
			width: 100px;
			height: 100px;
			background-color: red;	
		}
		
		/*id选择器*/
		#box{
			width: 100px;
			height: 100px;
			background-color: tan;
		}
		
		/*类型选择器*/
		.box1{
			width: 200px;
			height: 200px;
		}
		.box2{
			background-color: thistle;
			border: 1px solid black;
		}
		.box3{
			background-color: tomato;
		}
		
		/*群组选择器*/
		.box2,.box3{
			border-radius: 100px;
		}
		
	</style>
	<body>
		<!--内联样式-->
		<div style="height: 50px;">内联样式</div>
		<!--id标签，唯一标识 有且只有一个不可以重复-->
		<div id="box">id选择器</div>
			<!--类型 可以有多个也可以重复-->
		<div class="box1 box2">类型选择器1</div>	
		<div class="box1 box3">类型选择器2</div>
		
	</body>
</html>