开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
今天学习css中的几种选择器，css选择器是在css的外部样式中使用的，可以对所选中的部分进行样式设置的一种方式。
标签选择器
在css文件中，将 选择符（selector） 设置为html文件中的标签名。该css样式中的属性和属性值会对应的添加在html文件中被标签包裹的内容上。
它可以实现css对html中元素一对一和一对多的控制。
css对html中元素一对一的控制
例如下图：
css文件中写下的就是一个标签选择器，选择的标签就是html文件中的 div标签。
这个选择器的属性1是字体颜色，属性值是红色；属性2是背景颜色，属性值是黄色，最后展示的效果就是黄色底色，红色的“hello Word”文本。
css对html中元素一对多的控制
标签选择器就是将html中所有相同标签选中并赋予样式。
例如下图：
html中书写了两个div标签和一个p标签，css只对div标签设置了属性，因此最终的效果是两个div标签中的内容都被赋予了红色字体黄色背景的效果。
类选择器
- 在html中对需要赋予css样式的标签加上一个
class属性，属性值可以自定义为任意名称。
在css中把选择符（selector）设置为.class属性值。
例如下图：
html中书写了一个div元素，给div标签加上了class属性，其属性值是color。
css文件中书写的就是一个类选择器，最终.color中设置的属性值会被赋予在html中的div内容上，展示出红色的“hello Word”文本。
一个元素有多个class属性时
对一个html元素可以设置多个class属性，每个属性之间空一格即可。
例如下图：
html中第二行文字设置了两个class属性：color和size，css中对两个类选择器分别设置了属性，最终展示的结果就是第二行的文字比第一行的文字大，原因就在于增加的 size 选择器。
同一个类选择器可以被添加至多个元素中，因此可以对多个有相同样式的元素添加同一个class属性值
多个类选择器定义了相同属性时
当一个元素有多个class属性，且这些属性定义了相同元素时，最终以哪个属性值为准呢？
举个例子，如图：
图一
图二
图三
图四
- 在图一和图二中，除了html中class值的先后顺序不同以外其他内容都相同。展示的结果均为白色字体，黄色背景色。白色字体是
b定义的属性，此时app定义的红色字体颜色失效了。 - 在图二和图三中，除了css中选择器列出的顺序不同以外其他内容都相同。图二展示的结果是白色字体，图三的结果展示的是红色字体。展示的是各自css中后定义的选择器中的color值。可以猜测当一个元素有多个class属性，且这些属性定义了相同元素时，最终以css中后定义的属性值为准。那么展示的结果与html中class属性值的出现顺序有没有关系呢？
- 在图三和图四中，除了html中class值的先后顺序不同以外其他内容都相同。展示的结果为红色字体，白色背景色，html中不论是
b属性值在前还是app属性值在前都展示的是app选择器定义的红色字体属性。因此可以得出结论：展示的结果与html中class属性值的出现顺序没有关系。
