CSS基础选择器

CSS基础选择器

1. 标签选择器（元素选择器）

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

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}
/*例如将所有的span改为蓝色背景*/
span {
    background-color: blue;
}

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的div标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

2. 类选择器

可以差异化选择不同的标签，单独选一个或某几个标签。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”表示。

.类名 {
    属性1: 属性值1;
    ...
}
/*例如将拥有blue类的HTML元素均设为蓝色*/
.blue {
    color: blue;
}
/*某个HTML元素要使用上面的样式时，通过调用类名使用*/
<div class="blue"></div>

注：

1. 注意类名前的小点
2. 长名称或多个词组可以使用"_"隔开
3. 尽量使用英文字母表示
4. 命名要有意义

3. 类选择器-多类名

可以给一个标签指定多个类名，从而达到更多的选择目的。

<div class="blue font18"></div>

多类名使用方式

1. 在标签class属性中写多个类名
2. 多个类名之间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

多类名在开发中的使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，统一修改也非常方便。

4. id选择器

可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#id名 {
    属性1: 属性值1;
    ...
}
/*例如将id为blue的元素的内容设置为蓝色*/
#blue {
    color: blue;
}
/*某个HTML元素要使用上面的样式时，通过id名调用*/
<div id="blue"></div>

id选择器与类选择器的区别：

1. 类选择器可以使用多次，id选择器只能使用一次
2. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

5. 通配符选择器

选取页面中所有元素。在CSS中，使用“*”定义。

/*清除所有元素初始指定的内外边距*/
* {
    margin: 0;
    padding: 0;
}

注：通配符选择器不需要调用，自动就给所有的元素使用样式。

6.总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.blue
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#blue
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*