CSS选择器之类选择器和id选择器详解

一、学习目标

能说出选择器的作用

Id 选择器和类选择器的区别

①css选择器干嘛用的？

找到特定的HTML元素，选择HTML标签，把我们想要的标签选出来。

h3 {

color:red;

}

二、运用

能够用基础选择器给页面元素加样式

三、选择器种类

⑴基础选择器

①标签选择器（元素选择器）

作用：可以把某一类标签全部选择出来，比如所有div标签，所有span 标签等。

缺点：不能差异化处理标签元素样式。

#标签选择器，直接写标签，全部不放弃
<style>
	div {
		color:red;
	}
	span {
		color:green;
	}
</style>

#标签选择器，直接写标签，全部不放弃

②类选择器

语法：

.类名 {

属性1：属性值1；

属性2：属性值2；

…

}

调用:

优点：可以为元素定义单独或者相同的样式，可以选择一个或者多个标签。

#用点自定义，一个或多个，类名别写错，谁用谁调用，工作用最多。
<style>
	.red {
		color:red;
	
	}
</style>
<div class="red"></div>

③类选择器的特殊用法——多类名

调用：

④id选择器

#id名 {

属性1：属性值1；

属性2：属性值2；

…

}

<style>
	.font100 {
		font-size:100px;
	}
	.red {
		color:red;
	}
</style>
<div class="red font100"></div>

⑤通配符选择器

用* 选择页面所有标签

* {

color:red;

}

<style>
	* {
		margin:0;
		padding:0;
	}
</style>

缺点：*选择器，会降低页面相应速度，通常不建议使用。

注：id选择器和类选择器的区别。类选择器好比一个人的名字，可以多人一样，可以多次使用。id选择好比一个人的身份证号码，有唯一性，只能出现一次，不能重复。通常和js搭配使用。

⑵基础选择器总结
　　
http://moban.shenhuangji.com/post/14.html