1.类选择器:“class”

  在css中用“.”来寻找,类选择器可以有多个属性值,用空格分开即可。

2.唯一选择器:”id“

  在css中用“#”来寻找,唯一选择器只能有一个属性值。此时只能选择name一个名称,不可以和其他名称共存。

3.通配符选择器:”*“

  匹配所有标签。

4.标签选择器:“<a><span>”等

  根据HTML的标签名称来选择对应的标签,此时页面中出现的所有该标签都会被选择。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
	<style>
		*{
			text-align: center;
		}
		.c1{
			color:#ff0000;
		}
		.c2{
			font-size: 3em;
		}
		.c3{
			font-style: italic;
		}
		#i1{
			color:#006600;
		}
		#i2{
			font-size:5em;
		}
		span{
			color:#000066;
			font-size:2em;
		}
	</style>
</head>

<body>
	<div class="c1">div标签1</div>
	<div class="c1 c2">div标签2</div>
	<div class="c1 c2 c3">div标签3</div>
	<div id="i1">div标签3</div>
	<div id="i2">div标签4</div>
	<span>span标签1</span>
        <span>span标签2</span>
</body>
</html>

   在上述代码中,div标签1和div标签2可以单独设置某一个class样式,也可以和div标签3一样同时设置多个class样式。而div标签3和div标签4就只能设置唯一一个id样式,不能同时设置多个样式。

  通配符*选择器的居中样式,应用到了所有内容中。

  span标签也可以单独设置样式,如果页面中出现多个span标签,将都会被应用样式。

发表评论