菜鸟高飞尽之CSS-基础选择器

选择器分为基础选择器和复合选择器两个大类

基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id选择器、通配符选择器

一、标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式

语法：

标签名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
    ...
}

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签

二、类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签可以使用类选择器

语法：

 

 类选择器在HTML中以class属性表示，在css中类选择器以 . 显示

注意：

1.长名称或者词组可以使用中横线来为选择器命名  例 ： .star-sing{}

2.不要使用纯数字、中文等命名，尽量使用英文字母来表示

3.命名要有意义，尽量使别人一眼就知道这个类名的目的

类选择器之多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。简单理解 就是一个标签有多个名字

多类名使用方式

<div class="red font20">
    文本
</div>

注意：1.在标签class属性中写多个类名

           2.多个类名中间必须用空格分开

三、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，css中id选择器以#来定义

语法：

#id名{
    属性1：属性值1；
    ...
}

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

1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用

2.id选择器好比人的身份证号码，全中国唯一的，不得重复

3.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用

四、通配符选择器

在css中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）

语法：

*{
    属性1：属性值1；
    ...
}

通配符选择器不需要调用，自动就给所有的元素使用样式，特殊情况使用