css面试题及超详细解答（持续更新）

好运爸爸
89 阅读6分钟

1. css 权重是什么，是什么原理，应用场景？

  • 首先，css权重指的是css选择器的优先级，是决定当多个样式规则作用于同一个元素时，哪条规则会最终生效的优先级计算规则，它的核心作用是解决样式冲突问题；
  • 原理：权重通过等级比较，而非数值大小决定优先级，计算规则是
    • 1：等级划分，由高到低 !important > 内联样式 （如 style="color: red"）1000 > ID选择器（如 #id）100 > 类/伪类/属性选择器（如 .btn, :hover , [type="text"]）10 > 元素/伪元素选择器（如 div ，::before）1 > 通配符 * 0 > 继承样式
    • 2:比较规则 按等级从左到右逐级比较，当高级别相同时，才比较低级别； 权重不进位（如 1个ID > 1000个类） !important（慎用） > 内联样式 > 其他规则
  • 应用场景：
    • 1：覆盖第三方库样式
    • 2：组件样式隔离,通过id限定作用域 #app .dropdown-menu { /* 通过ID限定作用域 */ }
    • 3：响应式覆盖设计 @media (min-width: 768px) { .col-md .title { /* 媒体查询内的样式需要更高权重 */ } }
  • 实用技巧
    • 1：最小权重原则，尽可能用低权重的选择器失效效果；
    • 2：避免过度嵌套，推荐.parent > .child ,而非 div section ul li a
    • 3:!important使用规范，仅用于覆盖第三方库的!important样式，优先用提高权重代替
    • 4：权重会在浏览器开发者工具上显示，chromede Styles面板

2. 什么是伪类，伪元素，有哪些，他们的应用场景是什么？

  • 概念：
  • css中的伪类和伪元素，是两种特殊的语法，用于在不修改HTML结构的前提下，为元素添加特定状态或创建虚拟元素。
  • 一、伪类，描述元素的特定状态，（如交互状态、位置关系、表单状态等）
  • 常见伪类：
    • 1、交互状态：
      • :hover 鼠标悬停
      • :active 元素被激活，如点击瞬间
      • :focus 元素获取焦点，如输入框选中
      • :visited 已访问的链接
    • 2、位置关系：
      • :first-child 元素的第一个子元素
      • :nth-child(n) 第n个子元素，支持公式如 2n+1
      • :last-child 最后一个子元素
    • 3、表单状态
      • :checked 选中的复选框或单选按钮
      • :disabled 禁用的表单元素
      • :valid / :invalid 表单验证通过/未通过
    • 4、其他
      • :not(selector) 排除某个选择器
      • :target 当前URL的锚点目标元素
  • 应用场景
  • 1.交互反馈 button:hover { background: #007bff; transform: scale(1.05); }
  • 2.列表样式控制 ul li:first-child { font-weight: bold; } ul li:nth-child(2n) { background: #f8f9fa; }
  • 3.表单美化 input:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } input:invalid { border-color: #dc3545; }
  • 二、伪元素，创建不在HTML中虚拟元素，用于添加装饰内容或特殊样式。
  • 常见的伪元素：
    • ::before 在元素内容前插入虚拟元素
    • ::after 在元素内容后插入虚拟元素
    • ::first-line 选中元素的第一行文本
    • ::first-letter 选中元素的第一个字母
    • ::selection 用户选中的文本部分
  • 应用场景：
    • 1：装饰性内容 input:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } input:invalid { border-color: #dc3545; }
    • 2：清除浮动(经典用法) .clearfix::after { content: ""; display: table; clear: both; }
    • 3：文本特效 p::first-letter { font-size: 2em; color: #ff4757; } p::first-line { font-weight: bold; }
    • 4：自定义复选框或单选框： input[type="checkbox"]::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 1px solid #ddd; } input[type="checkbox"]:checked::before { background: #4CAF50; }
  • 三、核心区别
  • 1: 作用对象，伪类：现有元素的状态；伪元素：创建虚拟元素；
  • 2：语法符号，伪类：单冒号；伪元素：双冒号；
  • 3：DOM可见性，伪类：不修改DOM；伪元素：不修改DOM，但渲染虚拟内容
  • 4：常见用途，伪类：交互状态、位置选择；伪元素：装饰内容、文本特效；

3. css3 选择器有哪些？以及使用场景？

  • 1：基础选择器（最常用）
    • id选择器，#header，选中id='header'的唯一元素，权重100；
    • 类选择器，.btn，选中所有class='btn'的元素，权重10；
    • 元素选择器，div，选中所有div元素，权重1；
    • 通配符，* ，选中所有元素，权重0；
  • 基础选择器 - 场景：基础布局和全局重置；
  • 2：组合选择器（关系选择器）
    • 后代选择器，div p，选中div内容所有p
    • 子元素选择器，ul > li，选中ul的直接子元素li
    • 相邻兄弟，div + p，选中紧接着div的第一个兄弟元素；
    • 通用兄弟，div ~ p，选中div后的所有兄弟(同级)元素；
  • 组合选择器 - 场景：
    • /* 导航菜单层级控制 */
    • nav > ul { display: flex; } /* 直接子元素 */
    • nav a { color: #fff; } /* 所有后代链接 */
    • h1 + .subtitle { margin-top: -10px; } /* 标题后的副标题 */
  • 3：属性选择器（精准匹配）
    • [attr],[target],选中包含target属性的元素
    • [attr='value'],[type='text'],属性值完全等于text
    • [attr*='value'],[alt*='logo'],属性值包含logo
    • [attr^='value'],[href^='https'],属性值以https开头
    • [attr=′value′],[src='value'],[src='.png'],属性值以.png结尾
    • [attr~='value'],[class~='active']，属性值包含独立单词active
  • 精准匹配 - 应用场景:
    • /* 表单元素精准控制 */
    • input[type="email"] { width: 300px; }
    • a[href^="http"]::after { content: "↗"; } /* 外部链接标识 */
    • img[alt~="priority"] { border: 2px solid red; }
  • 4：伪类选择器（动态状态）
    • 交互状态，:hover :active ，鼠标悬停/点击时的状态
    • 表单状态，:checked :disabled ，选中或禁用表单元素
    • 结构伪类，:first-child :nth-child(2n),基于位置的元素选择
    • 其他，:not(.hidden) ，反向选择，排除特定元素
  • 动态状态应用场景：
    • /* 表格斑马纹效果 */
    • tr:nth-child(odd) { background: #f8f9fa; }
    • /* 按钮交互反馈 */
    • button:active { transform: translateY(2px); }
    • /* 排除隐藏元素 */
    • div:not(.hidden) { display: block; }
  • 5：伪类选择器（虚拟元素）
  • -::before，p::before,在元素内容前插入内容
  • -::after,.tooltip::after,在元素内容后插入内容
  • -first-line,p::first-line,选中文本的第一行
  • -first-letter,p::first-letter,选中文本的首字母
  • 虚拟元素应用场景：
    • /* 清除浮动 */
    • .clearfix::after { content: ""; display: table; clear: both; }
    • /* 首字母下沉 */
    • article::first-letter { font-size: 2em; float: left; }
  • 6：css3新增选择器（增强功能）
    • :nth-of-type(n)，div:nth-of-type(2),选中第2个div
    • :empty,div:empty,选中没有子元素的元素
    • :target,#section1:target,URL锚点对应的元素
    • :enabled/:disabled, input:enabled 启用或禁用的表单元素
  • 增强功能应用场景
    • /* 空内容提示 */
    • div:empty::before { content: "暂无数据"; color: #999; }
    • /* 锚点高亮 */
    • :target { background: #fff3d4; }
  • 7：特殊选择器
    • @media,@media(max-width:768px)，响应式条件判断
    • :is(),:is(h1,h2,h3),同时匹配多个选择器（css4）
    • :where,:where(.dark-mode)a,类似:is()，但是权重为0
  • 应用场景：
    • /* 响应式布局 */
    • @media (max-width: 768px) { .sidebar { display: none; }}
    • /* 简化多层嵌套 */
    • :is(header, footer) a { color: blue; }
  • 高频使用场景总结：
  • 全局样式，推荐 元素选择器、通配符
  • 组件复用，推荐 类选择器
  • 精准定位，ID选择器、属性选择器
  • 交互效果，:hover :active :focus
  • 内容修饰，::before ::after
  • 列表样式，:nth-child() :first-child
  • 表单控制，:checked :disabled :valid
avatar
文章
阅读
粉丝