理解 CSS 继承：实现一致样式指南
大家好，欢迎回到我的博客！👋
介绍
让我们一起探索CSS 继承的世界。我们将探讨哪些属性会传递下去，如何控制这种传递，以及它对你的设计为何如此重要。本指南面向所有人，无论你是初学者还是经验丰富的专业人士，旨在帮助你利用继承来编写更简洁、更易于维护的 CSS 代码。
你将从本文中学到什么🤓
-
继承基础：属性被继承的含义。
-
哪些属性会继承：深入了解继承属性和非继承属性。
-
控制继承：如何使用 CSS 关键字和技巧管理继承。
-
深入示例：通过真实世界的场景展示继承的实际应用，并附上更详细的解释。
什么是CSS继承？
CSS 继承是指某些属性会自动从父元素传递给子元素。这种机制有助于在嵌套元素中保持一致的样式，而无需重复定义这些属性。
继承的属性
**✅ 常见继承属性：**
-
文本属性：
font-family，，，，。这些font-size属性旨在使文本内容保持一致。colorline-heighttext-align -
可见性：（
visibility但不是display）。 -
光标：
cursor用于交互式提示。
💡继承示例：
<div style="font-family: 'Helvetica', sans-serif;">
<h2>This heading inherits the font from the div.</h2>
<p>And so does this paragraph, keeping the text look consistent.</p>
<a href="#">Even this link inherits, unless explicitly changed.</a>
</div>
结果：
除非另行指定，否则此处的所有子元素div都将使用 Helvetica 字体。
不继承的属性
✖️ 非继承属性：
-
盒模型属性：
width，，，，。height每个margin元素通常控制自己的空间。borderpadding -
背景：
background属性，因为背景通常应该每个元素都是唯一的。 -
位置：
position，top，left，right，bottom。
控制继承权
使用方法 inherit：要显式地使属性继承其父属性：
/* If the parent has a specific color, the child will adopt it */
.child-element {
color: inherit;
}
使用方法 initial ：将属性重置为其浏览器默认值：
/* Resets the font-size to the default size of the browser */
.reset-font-size {
font-size: initial;
}
使用方法 unset ：将属性还原为其继承值或初始值：
/* Will inherit if a parent has a color set, otherwise, it will be initial */
.unset-color {
color: unset;
}
实际案例
- 简化排版
<article style="font-family: 'Georgia', serif; color: #444;">
<h1>Title</h1>
<p>This paragraph inherits the font-family from the article.</p>
<p>The text color is also inherited, ensuring readability.</p>
</article>
/* Nothing needed here; inheritance does the job */
结果：文本全部采用articleGeorgia 字体和深灰色，营造出统一的外观。
- 覆盖继承
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
nav {
font-size: 16px; /* Base size for navigation */
color: #333; /* Base color for text */
}
nav a {
color: inherit; /* Inherits the color from nav, which is #333 */
font-size: inherit; /* Also inherits 16px */
text-decoration: none; /* Default is none, but doesn't inherit */
}
nav a:hover {
color: #0056b3; /* Changes on hover, overriding inheritance */
}
结果：链接的初始大小和颜色与其父元素相同nav，但会发生变化color，hover这表明可以控制继承。
笔记为了更好地检查结果并试验代码，您可以将所有代码块复制粘贴到 Codepen.io 上。
- 布局的自定义继承
<div class="container" style="padding: 20px; background: #f0f0f0;">
<div class="content">Content Here! This div will inherit the padding and background.</div>
</div>
.content {
padding: inherit; /* Inherits the padding from container */
background: inherit; /* Background color is also inherited */
}
结果：保持与原图content div相同的风格，确保流畅的视觉效果。paddingbackgroundcontainer
为什么理解遗传至关重要
-
一致性：继承有助于用更少的代码保持网站风格的一致性。
-
性能：通过利用继承，可以减少 CSS 规则的数量，从而有助于提高加载速度和解决优先级问题。
-
灵活性：了解如何控制继承可以实现更动态的设计，其中元素可以根据需要共享或覆盖样式。
结论
CSS 继承就像网页设计的家谱，确保样式以合乎逻辑且高效的方式传递。通过理解和运用继承，您可以打造既一致又灵活的设计。
记住，虽然有些属性会自然继承，但你始终可以使用 CSS 关键字（如inherit、initial和unset）来控制它们。
祝你编程愉快！🤓
👋 你好，我是 Eleftheria，社区经理、开发者、公众演讲者和内容创作者。
🥰 如果你喜欢这篇文章，请考虑分享。
文章来源：https://dev.to/eleftheriabatsou/understanding-css-inheritance-a-guide-to-consistent-styling-2kdg