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 {color: blue;}
类选择器	能够选出一个或多个标签	能够根据需求选择	很是多	.blue {color: blue;}
id选择器	一次只能选择一个标签	id属性只能在每一个HTML文档中出现一次	通常和js搭配	#blue {color: blue;}
通配符选择器	选择全部的标签	选择的太多，有部分不须要	特殊状况使用	* {color: blue;}