层叠样式表 (CSS) 是 Web 的一项基础技术，允许开发人员控制 HTML 文档的视觉呈现。虽然 CSS 语法乍一看似乎很简单，但应用和继承样式的方式可能出奇地复杂。理解这些复杂性对于编写高效、可维护和可预测的 CSS 至关重要。
在这份综合指南中，我们将探讨 CSS 的级联和继承概念。
级联是当存在多个冲突规则时确定将哪些 CSS 规则应用于元素的算法。了解级联的工作原理对于编写按预期运行的 CSS 至关重要。级联按以下顺序考虑多个因素：
为了完全详尽，我们可以添加：
让我们按优先顺序分解影响级联的因素：
CSS 可以来自三个不同的来源：
通常，作者样式优先于用户样式，而用户样式又会覆盖用户代理样式。这允许开发人员自定义元素的外观，同时在必要时仍然尊重用户的偏好。
使用 style 属性直接应用于元素的样式具有非常高的优先级：
<p style="color: red;">This text will be red.</p>
内联样式将覆盖外部样式表或
使用内联样式通常不鼓励，因为它将演示与内容混合在一起并使样式更难维护。
特异性是CSS中的一个关键概念，它决定了当存在多个冲突规则时将哪些样式应用于元素。每个 CSS 选择器都有一个特异性编号，可以通过计算该编号来预测哪些样式将优先。
特异性通常表示为四部分数字 (a,b,c,d)，其中：
结果数字不是以 10 为基数。相反，请将其视为从左到右比较的单独列。请参阅示例：
考虑这两个相互冲突的规则：
#header .nav li { color: blue; } /* (0,1,1,1) */
nav > li a { color: red; } /* (0,0,0,3) */
第一条规则 (0,1,1,1) 具有更高的特异性，因此文本将为蓝色。
伪类选择器（例如 :hover）和属性选择器（例如 [type="text"]）都具有与类选择器相同的特异性。
通用选择器 (*) 和组合符 (>, +, ~) 不影响特异性。
此外，:not() 伪类也不会增加特异性值；仅计算其中的选择器。
一些在线工具可以帮助计算特异性 (https://specity.keegan.st/)。
如果其他条件相同，则样式表中稍后出现的规则优先：
.button { background-color: blue; }
.button { background-color: green; } /* This one wins */
在此示例中，按钮将具有绿色背景。
虽然理解级联对于编写可维护的 CSS 至关重要，但还有一个难题可以覆盖我们迄今为止讨论的所有规则：!important 关键字。
!important 关键字可以覆盖级联中的所有其他注意事项，除了其他具有更高源优先级的 !important 声明。
/* styles.css */
.button {
background-color: blue !important;
}
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button style="background-color: red"> My button </button>
<!-- The color will be blue due to !important above -->
</body>
In this example, even though inline styles usually have the highest priority, the button will still have a blue background because of the !important declaration.
The !important keyword actually introduces additional layers to the cascade. The full order of precedence, from highest to lowest, is:
While !important can be tempting as a quick fix, it's generally considered a last resort. Overuse can lead to specificity wars and make your CSS harder to maintain. Legitimate use cases include:
If you find yourself using !important often, consider refactoring your CSS to use more specific selectors or a more modern approach like utilising :is() and :where() to write more flexible and maintainable styles. (I talk about these two in more details here)
Also, the @layer at-rule, which is fairly supported, allows you to create "layers" of styles with explicitly defined order of precedence:
@layer base, components, utilities;
@layer utilities {
.btn { padding: 10px 20px; }
}
@layer components {
.btn { padding: 1rem 2rem; }
}
This offers a more structured approach to managing style precedence without resorting to !important or engaging in a specificity arms race. However, I haven’t used this in a production project myself, if you do, I’d love to hear about your experience :)
Inheritance is another fundamental concept in CSS. Some CSS properties are inherited by default, meaning child elements will take on the computed values of their parents. This is particularly useful for text-related properties like color, font, font-family, font- size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing.
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.5;
}
In this example, all text within the body will inherit these styles unless explicitly overridden. This allows for efficient styling of document-wide typography without having to repeat rules for every element.
A few others inherit as well, such as the list properties: list-style, list-style-type, list-style-position, list-style-image, and some other table related properties
Not all properties are inherited by default. For example, border and padding are not inherited, which makes sense – you wouldn't want every child element to automatically have the same border as its parent.
CSS provides several keywords to give you fine-grained control over inheritance and to reset styles:
The initial and unset keywords override all styles, affecting both author and user-agent stylesheets. This means they reset the element's styling to its default state, ignoring any previous styling rules applied by the author or the browser.
However, there are scenarios where you only want to reset the styles you’ve defined in your author stylesheet, without disturbing the default styles provided by the browser (user-agent stylesheet). In such cases, the revert keyword is particularly useful. It specifically reverts the styles of an element back to the browser’s default styles, effectively undoing any custom author-defined styles while preserving the inherent browser styling.
请注意，使用速记属性时省略的值会隐式设置为其初始值。这可能会覆盖您在其他地方设置的其他样式。
通过理解级联、继承和现代 CSS 功能的复杂性，您将能够更好地编写高效、可维护且强大的样式表。请记住，CSS 不仅仅是让事物看起来更漂亮，它还在于创建可在各种设备和浏览器上工作的健壮、灵活的设计。
以上是掌握 CSS：了解级联的详细内容。更多信息请关注PHP中文网其他相关文章！
