CSS 基础知识特异性和继承性

在本文中，我们将探讨每个布局设计师和前端开发人员都应该掌握的两个关键 CSS3 概念：特异性和继承。这些基础知识对于理解如何应用样式以及如何控制它们在页面不同元素中的行为至关重要。

特异性

特异性决定了选择器如何“特定”决定应用哪种样式。这是根据我们使用的选择器类型使用数值计算的：

• 标签和伪元素： 001 的值
• 类、属性和伪类： 010 的值
• ID： 值为 100
• 在线样式：值1000
• ！重要提示： 会覆盖所有内容，因此建议避免使用它，以避免破坏特异性。

特异性示例：

在这种情况下，特异性计算为111，通过添加：

获得

h1（标签）= 001
.title（类）= 010
#标题 (ID) = 100
总计 = 111

数字越大，特异性就越大，这使得一个选择器比另一个选择器具有更大的权重，无论样式表（或级联）中的顺序如何。

注意：只要同一元素上的选择器的特异性相同，级联就会起作用。这就是为什么建议使用类来保持特异性易于管理并避免冲突。

有一些工具可以帮助我们分析代码中的特殊性，例如：

- CSS 特异性图生成器

如果我们在该工具的图表中看到高峰值，则表明特异性可能管理不善。

- 特异性计算器

只要放置你的选择器，直观地你就能知道它的特异性相当于多少。

• Visual Studio Code 还允许您了解选择器的特殊性。您只需将自己放在要查看的选择器上，该工具就会向您显示它的具体程度。

遗产

CSS 中的继承是某些元素从其包含元素“继承”属性的能力。这意味着应用于容器元素的某些样式会自动传递给其后代。

例如，在以下代码中，

中的

元素继承了 h1 标签的样式，而 外部 h1 不会继承它们：

共同继承的属性：

• 颜色
• 所有与字体相关的属性（例如font-family、font-size等）

注意：链接 () 不会自动从其父元素继承颜色样式，因为默认情况下它们通常具有独特的样式。要对它们应用继承的样式，我们可以使用特定的类或值 inherit.

要强制继承通常没有的属性，请使用值 inherit:

如果我们希望元素忽略继承的属性，我们可以使用initial:

将其重置为其初始值

特殊性和继承性的良好实践和注意事项

1. 避免在选择器中过度使用 ID： 虽然 ID 具有很高的特异性，但过度使用它们会使 CSS 难以维护和覆盖。最好使用类来使代码更加灵活。

2. 使用类来实现可重用性和可扩展性：类允许您将样式一致地应用于多个元素。这种方法在大型项目中特别有用，因为它提高了可维护性。

3. 尽可能避免使用 !important： !important 会覆盖所有特殊性，但会使代码维护复杂化并导致冲突。仅在非常特定的情况下和绝对必要时使用它。

4. 了解样式的级联和流程：级联（应用样式的顺序）仍然很重要。如果两个选择器具有相同的特性，则将应用最接近样式表末尾的样式。这种行为可以在全局和特定样式中利用。

5. 考虑继承布局对组件的影响：应用继承时，确保后代元素获得所需的样式。继承并不总是显而易见的，对容器的更改可能会意外地影响多个元素。

6. 使用结构良好的选择器来提高可读性：使用嵌套或降序选择器时，尽量保持清晰的结构并避免过多的嵌套，这会使代码更难以阅读和覆盖.

7. 使用特异性分析工具进行优化：有一些工具和扩展可以帮助您可视化和分析选择器的特异性，这在复杂的项目中非常有用。这也有助于识别可能需要重构的特异性峰值。

这些基础知识将允许您控制如何将样式应用到页面，从而实现更清晰、更专业的设计。在下一篇文章中，我们将深入研究 CSS3 的其他重要属性，以进一步提高我们对 Web 项目中样式的理解和处理。

以上是CSS 基础知识特异性和继承性的详细内容。更多信息请关注PHP中文网其他相关文章！