一、CSS 基本原理
CSS（层叠样式表）是一种用于描述网页样式和布局的语言。它的基本原理包括以下几个方面：
-
选择器：CSS使用选择器来指定要应用样式的HTML元素。选择器可以根据元素的标签名、类名、ID等来进行选择。
-
属性和值：在CSS中，可以使用属性和值来描述元素的样式。属性指定要改变的样式属性，例如颜色、字体大小等，而值则决定属性的具体效果。
-
继承：CSS中的某些样式属性是可以从父元素继承的，例如字体样式。这意味着子元素会继承一些父元素的样式属性，从而简化了样式定义的过程。
-
层叠：当多个CSS规则应用于同一个元素时，它们可能会产生冲突。这时，CSS使用层叠规则来确定最终应用的样式。层叠规则通常是根据选择器的特殊性、出现顺序等进行判断。
-
盒模型：在CSS中，每个元素都被视为一个矩形盒子。盒模型定义了元素在页面中的尺寸和布局。它包括元素的内容区域、内边距、边框和外边距。
-
流动布局：CSS使用盒模型和一些布局属性来实现页面的流动布局。流动布局使得页面元素根据可用空间自动调整位置和尺寸，以适应不同的设备和屏幕尺寸。
总的来说，CSS基本原理就是通过选择器选取元素，然后为选中的元素设置样式属性和值，最终呈现出所需的样式效果。同时，CSS还考虑了样式的继承和层叠等因素，以及盒模型和流动布局来实现页面的布局和排版。
二、通过具体案例对于选择器的特异度展开讲解
当多个CSS规则应用于同一元素时，特异度决定了哪些规则将会被优先应用。特异度是通过选择器的组合来计算的，具体的计算规则如下：
-
内联样式特异度：具有内联样式（即在HTML标签中直接定义样式）的元素特异度最高，记为1000。
-
ID选择器特异度：每个ID选择器都会增加特异度的权重，记为100。
-
类选择器、属性选择器和伪类选择器特异度：每个类选择器、属性选择器和伪类选择器都会增加特异度的权重，记为10。
-
元素选择器和伪元素选择器特异度：每个元素选择器和伪元素选择器都会增加特异度的权重，记为1。
-
组合选择器特异度：若有多个选择器组合在一起，则特异度会根据上述规则叠加。
通过一个具体案例来解释选择器特异度的计算方法：
HTML代码：
<div id="myDiv" class="container">
<p class="red-text">Hello, World!</p>
</div>
CSS代码：
#myDiv p.red-text {
color: red;
}
.container p {
font-size: 16px;
}
在上述例子中，有两个CSS规则应用于<p>元素。首先，#myDiv p.red-text选择器特异度为：ID选择器（#myDiv）权重100 + 元素选择器（p）权重1 + 类选择器（.red-text）权重10 = 111。其次，.container p选择器特异度为：类选择器（.container）权重10 + 元素选择器（p）权重1 = 11。
因此，由于特异度比较高，#myDiv p.red-text的规则将覆盖.container p的规则。所以，该段落的文本颜色将会是红色。
特异度是CSS中非常重要的概念，理解特异度的计算方法可以帮助我们更好地理解和控制样式的应用顺序和优先级。
