前端面试必备：CSS选择器优先级与继承特性解析

"「2021」高频前端面试题汇总之CSS篇.pdf" 在前端面试中，CSS部分是考察开发者技能的重要环节。本资源聚焦于CSS的基础知识，特别是选择器和优先级，以及一些关键的CSS特性。以下是详细讨论： 1. CSS选择器及其优先级 - ID选择器 (#id)：优先级为100，用于唯一标识一个元素。 - 类选择器 (.classname) 和 伪类选择器 (如 li:last-child)：优先级为10，适用于分组或特定状态的选择。 - 属性选择器 (如 a[ref="eee"])：同样为10，用于基于元素的特定属性来选择元素。 - 标签选择器 (如 div) 和 伪元素选择器 (如 li:after)：优先级为1，适用于大量元素的通用样式。 - 相邻兄弟选择器 (如 h1+p)、子选择器 (如 ul>li) 和 后代选择器 (如 li a)：优先级为0，用于描述元素之间的关系。 - 通配符选择器 (*)：优先级也为0，用于设置所有元素的默认样式。 优先级规则如下： - !important声明的样式具有最高优先级。 - 若优先级相同，则后出现的样式生效。 - 继承的样式具有最低优先级。 - 通用选择器、子选择器和相邻同胞选择器的权值为0，不影响优先级比较。 2. CSS中可继承与不可继承属性 - 不可继承的属性 包括： - `display`：控制元素框的类型。 - 文本属性：如 `vertical-align`、`text-decoration`、`text-shadow` 和 `white-space`。 - 盒子模型属性：包括 `width`、`height`、`margin`、`border` 和 `padding`。 - 背景属性：如 `background`、`background-color`、`background-image`等。 - 定位属性：如 `float`、`clear`、`position`等。 - 生成内容属性：`content`、`counter-reset` 和 `counter-increment`。 - 轮廓样式属性：如 `outline-style`、`outline-width` 和 `outline-color`。 - 页面样式属性：与打印和分页相关的属性。 - 可继承的属性 包括： - 字体属性，如 `font-family`、`font-size`、`font-weight`。 - 颜色属性，如 `color`。 - 文本属性，如 `line-height`、`text-align`。 - 列表属性，如 `list-style-type`、`list-style-image`。 - 边距属性，如 `margin`（仅限块级元素的垂直外边距）。 - 表格相关属性，如 `caption-side`、`border-collapse`。 理解这些CSS基础知识对于前端开发人员来说至关重要，因为它们直接影响到页面的布局、样式和交互效果。在面试中，面试官可能会通过这些问题来评估候选人对CSS的掌握程度，以及他们在实际项目中的应用能力。熟练掌握这些概念将有助于开发者构建更加高效、易维护的网页设计。