download：SpringBoot+Uniapp实战开发全新仿抖音短视频App
11 种样式选择器
- 通配符选择器，* 是通配符，表示其下的样式对所有元素生效，但通配符的优先级较低。
- id选择器，例如 #container
- 类选择器，例如 .box
- 标签选择器（类型选择器），例如 div span p 等元素标签，直接以标签名称作为样式选择器
- 后代选择器，有层级关系的叠加样式选择器，是样式选择器的一种组合使用，例如 div p
- 子选择器，例如 ul>li 或 div>p，对 ul 直接的子元素 li 设置样式，对 div 的直接子元素 p 设置样式。
- 伪类选择器，例如 a:hover，当鼠标悬浮于 a 标签时的样式。
- 伪元素选择器，例如常见的 ::before 和 ::after，单冒号写法也被现代浏览器支持（那是css2的语法）。
- 相邻兄弟选择器，例如 img + p，样式将对 img 图片后面紧跟着的 p 段落生效。
- 兄弟选择器，A~B 作用于 A 元素之后所有同层级 B 元素。
- 属性选择器，通过已经存在的属性名或属性值匹配元素，例如 a[href=“example.org”] 或 a[title]。
样式优先级是如何计算的？
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
下面列表中，选择器类型的优先级是递增的：
- 1.类型选择器(标签选择器)（例如，h1）和伪元素（例如，::before）
- 2.类选择器 (例如，.example)，属性选择器（例如，[type=“radio”]）和伪类（例如，:hover）
- 3.ID 选择器（例如，#example）。
- 嵌套组合选择器 多种选择器嵌套组合的优先级，往往比单一的样式选择器优先级更高。 例如 #id > div > p{} 的优先级会比 p{} 和 div > p{} 的优先级更高。
- 内联样式 给元素添加的内联样式 (例如，style=“font-weight:bold”) 几乎总会覆盖外部样式表的任何样式 ， 因此可看作是具有更高的优先级。
- !important 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。 当然 !important 可以覆盖 !important，此时需要比较权重。
- 具体的优先级权重规则略显复杂： 一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。 百位： 选择器中包含ID选择器则该位得一分。 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 个位：选择器中包含元素、伪元素选择器则该位得一分。