-
::first-letter伪元素仅对块级容器中第一个字母或汉字生效，需避免flex/grid布局，支持color等文本属性但background在旧Safari不稳定，首字下沉推荐float+font-size+line-height组合，中文需注意Safari兼容性，禁用伪元素嵌套。
-
嵌套越深浮动越容易“消失”是因为浮动只影响直接父容器，不向上冒泡；每层父容器都需单独触发BFC或清除浮动，否则塌陷导致布局错乱。
-
本文讲解如何通过事件委托替代静态数组绑定，解决动态创建的HTML元素无法响应事件的问题，并提供简洁、健壮、可维护的DOM增删方案。
-
双飞翼布局核心是浮动+负margin，用于实现中间内容优先渲染；HTML中main必须前置并三层嵌套，通过main-wrap占满整行、main设负margin腾出侧栏空间，左右栏用浮动与负margin定位，IE6需zoom:1等hack修复hasLayout问题。
-
批量修改HTML应基于结构理解而非纯文本替换：用正则精准匹配标签边界处理imgsrc，用BeautifulSoup安全修正a标签target属性，用perl或PowerShell处理跨行注释，操作前务必备份并抽样验证DOM结构。
-
最快实现图片模糊用CSSfilter:blur()，语法为filter:blur(3px)，单位必须带px，推荐范围0.5px–8px，动态控制宜改style.filter或切CSS类。
-
flex容器中纯文本不会垂直居中，因文本节点不参与flex布局；需包裹<span>等标签使其成为弹性项，再用align-items:center实现居中。
-
下拉框联动的核心逻辑是监听change事件并动态更新选项。需先清空目标下拉框，再根据映射关系或异步数据填充；注意防重复添加、禁用状态、错误处理及第三方库兼容性。
-
空格本身不干扰爬虫，真正问题是DOM结构脆弱、选择器过度依赖格式或服务端渲染变更；B站div末尾空格致CSS选择器失效，因>要求严格子元素关系；BeautifulSoup保留原始空白，lxml更宽容但xpath可能捕获前导空白；需区分处理文本、属性值及 实体；pandas.read_html对表格最鲁棒；空格频发本质是SSR转向CSR，应优先检测原始响应，转向API或无头浏览器。
-
<p>使用CSSFlexbox结合gap属性可快速构建响应式网格布局，通过display:flex、flex-wrap和gap设置容器，再用flex控制子项宽度，如calc(33.333%-16px)实现三列布局，并配合媒体查询在不同屏幕下调整为两列或单列，避免使用margin防止与gap冲突。</p>
-
text-align-last在Safari15.4前完全不支持，16+仅对块级元素有限支持；Chrome/Edge需配合text-align:justify才生效；Firefox支持最稳定，但中英文混排时对齐逻辑存在差异。
-
用transform:translateY()控制歌词滚动更平滑，配合will-change:transform和requestAnimationFrame，结合节流、固定行高、overflow:hidden等优化实现精准对齐。
-
级联下拉菜单的核心逻辑是通过父级选择动态筛选子级选项，确保数据联动性依赖前端事件监听、异步请求、后端数据过滤与DOM动态更新；实现时需在HTML中定义下拉元素，利用JavaScript监听父级change事件，清空并禁用子级，发送带父级参数的请求至后端接口（如/api/cities?provinceId=XXX），接收JSON格式城市列表后遍历生成option插入子级下拉框，加载完毕启用子级，同时通过禁用状态或加载提示优化体验；技术选型可采用原生Fetch、Axios或框架状态管理，优化手段包括按需加载、
-
通过CSSposition:fixed结合合理定位，可使表格中某列（如首列“leftdata”）的文字脱离文档流、悬浮于滚动区域之上，实现无论表格如何垂直滚动都持续可见的效果。
-
:last-child选择器用于选中父元素的最后一个子元素，常用于移除列表末尾边框、调整布局间距等场景；其语法为selector:last-child，要求目标元素必须是父节点的最后一个子节点且类型匹配，不支持文本或注释节点干扰，兼容现代浏览器及IE9+；相比:last-of-type，它更严格依赖结构顺序而非元素类型，能有效减少类名依赖，提升样式维护性。
