文章目录
- CSS简介
- 选择器
- CSS样式优先级
CSS简介
CSS是一种用于样式化网页的语言，全称为“层叠样式表”（Cascading Style Sheets）。
它可以控制网页中元素的外观和布局，例如颜色、字体、大小、边距、对齐等，让网页变得更加美观和易于阅读。
使用CSS可以将样式与网页内容分离开来，从而使网页结构更加清晰，减少HTML代码的复杂度，方便修改和维护。
CSS具有层叠的特性，即同一元素可以应用多个CSS样式，按照特定的规则进行叠加，从而实现更加灵活的样式控制。
总的来说，CSS是网页设计和开发中非常重要的一部分，它为网页提供了丰富的样式和布局控制，使得网页呈现更加美观和易于阅读。
选择器
CSS样式优先级
在 CSS 中，每个样式都有一个优先级，它决定了当多个样式应用于同一个元素时，哪个样式将最终被应用。CSS 样式优先级按照以下顺序进行排序：
- !important 关键字
- 行内样式（在元素的 style 属性中指定的样式）
- ID 选择器（#id）
- 类选择器、属性选择器和伪类选择器（.class、[attribute]、:hover 等）
- 元素选择器和伪元素选择器（div、span、::before、::after 等）
- 继承样式（从父元素继承的样式）
具有更高优先级的样式将覆盖具有较低优先级的样式。例如，如果一个元素同时具有行内样式和类选择器，那么行内样式将具有更高的优先级，并且将覆盖类选择器指定的样式。如果两个样式都是使用类选择器指定的，但是一个样式使用了更多的类名，则该样式将具有更高的优先级。如果两个样式具有相同的优先级，则后面的样式将覆盖先前的样式。如果一个样式具有 !important 关键字，则该样式将具有最高优先级，并且将覆盖所有其他样式。
对于CSS样式使用的优先级：
- 相同情况下按照加载顺序，写在后面的优先级更高
- 继承下来的样式优先级永远低于直接指定的优先级
- 内联优先级最高，
!important是个例外
