什么是CSS?

CSS层叠样式表（Cascading Style Sheets）,用于定义HTML内容在浏览器内的显示样式。

CSS的发展史

通过HTML提出：在早期的Web发展中，网页样式主要依赖于HTML元素属性，如<font>标签和bgcolor属性等，来控制页面的样式。随着Web技术的发展，这种方式逐渐显得不够灵活且难以维护。为了解决这个问题，CSS应运而生。CSS将样式与内容分离，使得网页样式的设计和维护变得更加简单高效。

CSS1：CSS1于1996年12月发布，是CSS的第一个正式版本。CSS1为Web开发者提供了基本的样式控制功能，包括字体、颜色、背景、边框、列表、定位等。这个版本使得开发者可以更方便地为网页添加样式，并且提高了网页的兼容性和可维护性。

CSS2：CSS2于1998年5月发布，是CSS的第二个版本。CSS2在CSS1的基础上新增了一些功能，如定位、浮动、层叠顺序（z-index）、生成内容、媒体查询等。这些新特性为Web开发者提供了更多的样式控制功能，使得网页布局和设计变得更加灵活。

CSS2.1：CSS2.1于2011年6月成为正式标准，是CSS2的一个修订版本。CSS2.1修复了CSS2中的一些错误，同时移除了一些不常用或难以实现的特性，提高了CSS的稳定性和互操作性。

CSS3：CSS3是CSS的最新版本，从2005年开始逐步推出。CSS3将CSS分为多个模块，每个模块负责一个特定的功能，如选择器、盒模型、背景和边框、文本效果、2D/3D转换、动画、过渡、多列布局等。这种模块化的设计使得CSS可以更快地更新和发展，同时也方便浏览器厂商逐步实现支持。CSS3引入了许多新特性和改进，大大丰富了Web开发者的工具箱，提高了网页的表现力和交互性。

为什么学习CSS?

CSS简化HTML相关标签，网页体积小，下载快；解决内容与表现分离的问题；更好的维护网页，提高工作效率。

选择器优先级

元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。

类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。

ID选择器：根据元素的ID属性选择特定元素。例如，#my-element选择ID为my-element的元素。

属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。

伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。

伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。

组合选择器：通过组合多个选择器来选择符合所有条件的元素。

后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。

子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。

相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。

一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。

多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。