选择器就是根据不同的需求把不同的标签选出来,这就是选择器的作用。简单来说就是选择标签用的。
选择器分为基础选择器和复合选择器两大类。基础选择器是由单个选择器组成的,基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器.
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
作用:标签选择器会把某一类标签全部选出来,比如所有的<div>标签、所有的<p>标签等
优点:能快速为页面中同一类型的标签统一设置样式
缺点:不能设计差异化样式,只能选择同一类标签的全部
如果想要差异化选择不同的标签,单独选一个或几个标签,就可以使用类选择器。类选择器在HTML中以class属性表示,在CSS中,类选择器以“.类名”来表示
<style>
/* 所有属于red类的标签都会变为红色 */
.red {
color: red;
}
</style>
<div class="red">
这是一个红色的盒子
</div>
注意点:
类选择器-多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的。通过这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML中以id属性来设置id选择器,CSS中id选择器以“#id名”来定义。
注意点:同一个id属性只能在每个HTML文档中出现一次,不允许两个标签有相同的id属性值
id选择器与类选择器的区别:
在CSS中,通配符选择器使用“*”定义,它表示选取页面中的所有元素(标签)。
<style>
* {
color: red;
}
</style>