在网页设计的浩瀚宇宙中，CSS（层叠样式表）无疑是那颗最璀璨的星辰，它不仅赋予了网页绚丽多彩的外衣，更通过其独特的三大特性——层叠（Cascading）、继承（Inheritance）与优先级（Specificity），让网页的样式管理变得既灵活又高效。今天，就让我们一同揭开CSS这三大魔法特性的神秘面纱，通过具体例子，感受它们如何携手为网页设计增添无限可能。
一、层叠（Cascading）：样式的交织与碰撞
特性概述：CSS的层叠特性允许同一元素被多个样式规则所影响，最终展现的样式是这些规则层叠后的结果。层叠的顺序决定了哪个样式最终会被应用，它遵循一定的规则，如重要性（!important标记）、来源（用户样式、作者样式、浏览器默认样式）和特异性（Specificity）。
具体例子：
假设我们有以下CSS规则和HTML结构：
<style>
p { color: blue; }
.highlight { color: red; }
#special { color: green !important; }
</style>
<p class="highlight" id="special">这段文字会是什么颜色？</p>
在这个例子中，<p>元素同时被三个样式规则所影响：一个基于元素类型（p），一个基于类名（.highlight），还有一个基于ID（#special）。由于ID选择器具有更高的特异性，并且#special规则使用了!important标记，因此最终文字的颜色将是绿色。
二、继承（Inheritance）：样式的传递与共享
特性概述：CSS的继承特性允许子元素从父元素继承某些样式属性。不是所有CSS属性都可以继承，但像color、font-family等文本相关属性是可以被继承的。继承简化了样式表的编写，使得我们不必为页面上的每个元素都显式设置相同的样式属性。
具体例子：
<style>
body {
color: purple;
font-family: Arial, sans-serif;
}
</style>
<body>
<p>这段文字将继承body元素的color和font-family属性。</p>
</body>
在这个例子中，<p>元素没有直接设置color和font-family属性，但它从父元素<body>中继承了这些属性，因此文字颜色为紫色，字体为Arial。
三、优先级（Specificity）：解决冲突的仲裁者
特性概述：当多个样式规则应用于同一个元素时，优先级决定了哪个规则最终会被应用。CSS的优先级基于选择器的特异性（Specificity）来计算，特异性值越高的规则优先级越高。特异性值通过计算选择器中出现的不同类型选择器的数量来确定。
具体例子：
<style>
/* 特异性值：0,0,1,0 */
li { color: blue; }
/* 特异性值：0,0,1,1 */
ul li { color: green; }
/* 特异性值：0,1,0,0 */
#unique-list li { color: red; }
</style>
<ul id="unique-list">
<li>列表项的颜色将是？</li>
</ul>
在这个例子中，<li>元素被三个样式规则所影响。虽然ul li选择器比li选择器更具体，但#unique-list li选择器由于包含了ID选择器（#unique-list），其特异性值最高，因此列表项的最终颜色将是红色。
通过CSS的层叠、继承与优先级这三大魔法特性，设计师和开发者能够灵活高效地控制网页的样式表现，创造出既美观又富有交互性的网页作品。掌握这些特性，无疑将让你的网页设计之路如虎添翼，开启无限创意的可能。
原文链接：https://juejin.cn/post/7391705629000679443 作者：五号厂房
