CSS之选择器

选择器的作用

选择器就是根据不同标签选择出来，这就是选择器的作用，简单点说，选择标签用的。

选择器的分类，可以分为基础选择器和复合选择器。
基础选择器是由单个选择器组成。
基础选择器又包括，标签选择器，类选择器，id选择器，通配符选择器。

1.标签选择器

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

语法

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

2.类标签

单独选择一个或几个标签，开发最常用。

语法

.类名 {
   属性名1： 属性值1；
   属性名2： 属性值2；
   属性名3： 属性值3；
   属性名4： 属性值4；
   
}

类选择器-多类名

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

多类名的使用方式

语法

<div class="red front20">亚瑟</div>

1.标签class属性中写多个类名。
2.多个类名间必须有空格分开。

多类名的应用场景

可以把一些标签元素相同的样式放到一个类中。
标签可以使用这些公共类，然后再调用独有的类。
从而节省了css代码，统一修改也方便。

3.id选择器

id选择器可以为特定id的HTML元素指定特定样式。
HTML以id属性来设置id选择器，css中id选择器以“#”来定义。
语法

#类名 {
   属性名1： 属性值1；
   属性名2： 属性值2；
   属性名3： 属性值3；
   属性名4： 属性值4；
   
}

id选择器和class选择器区别，是id选择器只能够调用一次，别人无法在次使用。
类选择器在修饰样式中最常用。
id选择器一般要用于页面唯一元素上，经常和javascript搭配使用。

4. 通配符选择器

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

* {
  属性名1： 属性值1；
  属性名2： 属性值2；
  属性名3： 属性值3；
  属性名4： 属性值4；
  
}

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

选择器总结

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