CSS中选择器的种类以及如何通过权重来计算选择器的优先级
一、CSS选择器的种类 (6种)
1）元素选择器
通过元素名来选择CSS作用的目标，比如：< p >、< h1 >等
❤️ 如果页面中有多个相同的元素需要重用同样的效果，建议使用元素选择器
2）类选择器
类选择器：选择class等于某值的所有元素.class是程序员根据逻辑自己给元素增加的分类。
❤️ 如果页面中有多个不同的元素需要重用同样的效果，建议使用类选择器。
3）id选择器
id选择器以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值。
语法为：
——选择器前面需要有一个#号
——选择器本身则为文档中某个元素的id属性的值
4）选择器分组
选择器声明为以逗号隔开的选择器列表
——将一些相同的规则作用于多个元素
5）派生选择器
派生选择器用来选择子元素，分为2种：
1）后代选择器：选择某元素的所有后代（子孙）元素
2）子元素选择器：选择某元素的所有子元素
6）伪类选择器
- 伪类用于向某些选择器添加特殊的效果
- 使用冒号（：）作为结合符，结合符左边是其他选择器，右边是伪类。
- 常用的伪类有：link,visited,active,hover,focus
1 ) link:：向未被访问的超链接添加样式
2）visited：向已被访问过的超链接添加样式
3）active：向被**的元素添加样式
4）hover：当鼠标悬停至元素上方时，向该元素添加样式
5）focus：当元素获取焦点时，向该元素添加样式
二、选择器的优先级
选择器是有优先级的，可以通过权重来计算其优先级。
- ID选择器：100
- 类选择器：10
- 元素选择器：1
记录一下今天在写页面时出现的问题：
页面布局如下图：
- 问题是：在CSS文件中给核心区下的按钮区、数据区、分页区设置尺寸与边框时，我发现，按钮区、数据区、分页区的width都是910px，按钮区和分页区的height都是40px，只有数据区的height是310px，我打算先将按钮区、数据区、分页区的width都设置为910px，height都设置为40px,最后再选中数据区，设置height为310px，将之前设置的height进行覆盖。
重点是，想法很好，但是结果并不如人意。
具体操作如下图：
运行程序，页面截图：
从页面结果来看，我最后通过类选择器.data选中数据区设置height为310px，并没有奏效。
接下来，通过审查页面中的元素，看box模型，截图如下：
可见设置的310px并没有生效！！！
- 为什么呢？？？
原因见下图：
如何修改呢？
页面效果截图：
❤️ height值覆盖成功，实现完美分区！！！！