伪类选择器是CSS中强大的工具能够根据元素状态位置或其他动态条件精确选择并应用样式它们扩展了基础选择器功能使界面交互更灵活伪类选择器分为状态伪类结构伪类表单伪类和其他伪类状态伪类响应用户行为如悬停激活聚焦等结构伪类通过DOM层级关系选择元素如第一个子元素或隔行变色表单伪类针对表单控件状态如选中禁用验证等组合伪类可实现复杂选择逻辑动态伪类需考虑性能尤其在移动端浏览器兼容性方面部分伪类需要前缀或替代方案伪类常与伪元素配合实现首字母下沉工具提示等复杂效果
CSS属性选择器通过方括号包裹属性名实现元素选择功能包括基本存在性检查精确值匹配子串包含匹配前缀后缀匹配以及空格或连字符分隔列表匹配等多种形式它们可以与伪类组合使用实现更复杂的选择规则属性选择器特别适合处理特定属性或属性值的元素如链接类型表单控件等使用时需注意性能考虑避免过度复杂的匹配模式简单的属性选择器性能与类选择器相当合理使用能显著提升样式控制灵活性
CSS选择器是样式规则的核心部分基本选择器包括元素类ID选择器元素选择器直接使用HTML标签名称匹配文档中所有该类型元素类选择器以点号开头应用于HTML中任何具有对应class属性的元素一个元素可以有多个类ID选择器以井号开头选择具有特定ID属性的元素ID在文档中应该是唯一的这些选择器可以组合使用创建更具体的选择规则当多个选择器指向同一个元素时CSS有一套特殊性规则来决定哪个样式会被应用实际应用中应尽量使用类选择器保持选择器简洁性基本选择器在所有现代浏览器中都有很好的支持
CSS盒模型是网页布局的核心概念它将每个HTML元素视为由内容区域内边距边框和外边距组成的矩形盒子标准盒模型中width和height仅指内容尺寸而替代盒模型border-box则包含内容内边距和边框外边距有特殊行为如折叠和负值盒模型与FlexboxGrid等布局系统结合使用现代浏览器工具可直观调试盒模型常见问题包括边框影响布局和内边距导致溢出可通过box-sizing解决不同元素如块级和行内元素的盒模型表现不同定位方式也会影响盒模型行为复杂的盒模型计算可能影响性能建议使用transform优化
CSS的单位系统是样式设计的重要组成部分包括绝对单位相对单位视口单位和函数单位等绝对单位如px和pt固定不变适合精确控制相对单位如em和rem基于上下文灵活适应响应式设计视口单位vw和vh相对于视口尺寸适合全屏布局函数单位calc和clamp支持动态计算颜色单位有十六进制RGB和HSL等角度和时间单位用于动画和变换其他特殊单位如fr和ch适用于特定场景这些单位各有特点可根据需求灵活选用
CSS注释使用斜杠和星号包裹内容形成块注释没有单行注释语法注释可以跨越多行常见用途包括代码说明分组和临时禁用样式高级用法有条件注释文档注释和代码标记预处理器支持单行注释但不会出现在编译结果中最佳实践建议保持简洁信息丰富定期清理无用注释使用一致风格良好注释习惯能提高代码可维护性但CSS注释无法嵌套使用注释符号具有最高优先级会忽略内部所有内容
CSS优先级通过权重系统决定样式应用规则，权重高的样式会覆盖权重低的样式，权重计算基于选择器类型和数量而非代码顺序。优先级权重由四部分组成，从高到低依次是important声明、内联样式、ID选择器、类属性伪类选择器以及元素伪元素选择器。权重计算采用类似数字位的方式，分别统计各类选择器的数量。important会覆盖所有其他规则但应谨慎使用，内联样式具有很高优先级，通配符和继承样式优先级最低。复杂选择器组合使用时需要分别计算各部分权重相加。伪类伪元素、属性选择器各有不同权重，选择器组合方式会影响最终权重。实际项目中常遇到优先级冲突，应避免过度依赖高优先级选择器。调试时可使用浏览器开发者工具检查应用样式，注意计算后的优先级权重。现代CSS方法论如BEM通过命名约定管理优先级，媒体查询不影响选择器优先级但条件应用样式。CSS变量遵循常规优先级规则，阴影DOM中外部样式通常不影响组件内部。动画样式会覆盖常规样式，用户代理样式优先级最低。编写CSS时需在选择器性能和优先级间找到平衡，动态类名遵循相同优先级规则。未来CSS新特性如is和where将改变优先级计算方式。
CSS的层叠与继承机制是样式表的核心特性层叠机制决定了多个样式规则作用于同一元素时的优先级排序依据来源重要性选择器特异性和出现顺序三个因素选择器特异性由四部分组成内联样式ID选择器类属性伪类选择器以及元素伪元素选择器继承机制指某些CSS属性自动从父元素传递给子元素常见可继承属性包括文本相关和列表相关属性CSS提供inherit initial unset revert四个关键字控制继承层叠上下文影响元素在z轴上的显示顺序创建条件包括根元素特定定位属性等实际应用中需注意important滥用通配符副作用等问题性能优化需避免复杂选择器和过长继承链现代CSS引入变量和layer规则改变传统层叠方式浏览器开发者工具可辅助调试样式跨浏览器兼容性需特别处理表单元素和伪元素差异
CSS选择器是样式表语言的核心组成部分用于精准定位HTML文档元素并施加样式规则基础选择器包括元素选择器类选择器ID选择器和通配选择器构成CSS选择器体系的基石属性选择器通过元素属性进行精确匹配支持多种匹配模式伪类选择器基于元素状态或文档结构动态选择元素伪元素选择器创建虚拟元素进行特殊样式处理组合选择器通过连接符建立元素关系链包括后代组合器子组合器相邻兄弟组合器和通用兄弟组合器选择器优先级通过特异性计算决定应用顺序高效选择器编写需避免深层嵌套优先使用类选择器限制通用选择器使用范围现代CSS新增选择器包括逻辑组合伪类方向感知伪类和范围限定选择器等
CSS引入方式主要包括内联样式内部样式表和外部样式表三种内联样式直接写在HTML元素的style属性中优先级最高但维护性差适合临时调试内部样式表通过style标签嵌入HTML文档支持选择器复用适合单页面项目外部样式表通过link标签引入独立CSS文件支持缓存和多页面复用是生产环境首选三种方式各有适用场景实际开发中常组合使用现代前端工具还支持CSS预处理器和模块化开发同时需注意不同引入方式对浏览器渲染性能的影响大型项目应建立规范确保代码可维护性
