-
:required仅匹配required属性且不自动添加星号或提示，需手动用::after或HTML实现；优先级低易被覆盖，IE10+支持但IE不支持input上::after；动态添加属性即时生效，但不可替代服务端校验。
-
link标签通过rel="stylesheet"引入CSS，浏览器会异步下载CSS文件并构建CSSOM，阻塞渲染但不完全阻塞HTML解析，需注意与JS交互时的阻塞问题，建议内联关键CSS、预加载和压缩资源以优化性能。
-
浏览器限制:visited仅能设置少数颜色类属性（如color）以防止隐私泄露，其他样式如background、transition均被忽略；:link与:visited互斥且仅对有效URL的<a>标签生效。
-
在网页开发中，图片元素通常通过img标签来插入。使用CSS选择器可以精准地为这些图片设置样式，比如控制大小、边框、对齐方式和响应式行为等。1.基本图片选择器最直接的方式是使用标签选择器img来统一设置页面中所有图片的样式：img{ max-width:100%; height:auto; border-radius:8px; box-shadow:02px5pxrgba(0,0
-
本文介绍如何使用原生JavaScript实现复选框组与顶部“全选”复选框的双向联动：点击全选框可批量操作子项，任一子项状态变化时自动更新全选框状态（全选时勾选，非全选时取消）。
-
绝对定位元素在网格容器中，grid-column/row仅设定位起点，span会引发偏移；inset优先于网格线；grid-area命名区域无效；Firefox下grid-line+transform有抖动。
-
:nth-child(odd)匹配父元素下第奇数个同类型子元素，但受所有子元素序号影响；:nth-of-type(odd)则仅按同标签元素计数，更适应含干扰节点的结构。
-
本文介绍如何将字符串按每3个字符为一组进行分割，并用点号连接，避免在末尾多出一个点号；推荐使用match()配合正则提取+join()组合的简洁可靠方案。
-
应按语义化层级组织HTML5结构：一、用header/nav/main/article/section/aside/footer替代div；二、HTML/CSS/JS物理分离；三、class名遵循BEM规范且语义化；四、用data-*属性解耦交互；五、CSS变量与JS同步状态。
-
推荐用requestAnimationFrame节流scroll事件，在回调中统一读取位置并更新transform；视差元素用position:relative+transform，避免脱离文档流；禁用top改变位置，启用GPU加速。
-
响应式轮播图的关键在于使用Flexbox布局、媒体查询和图片自适应技术。通过flex控制子项排列，结合object-fit和aspect-ratio保持图片比例，利用@media调整不同屏幕下的显示效果，并采用scroll-snap实现触摸滑动吸附，从而在移动端和桌面端均获得良好体验。
-
HTML5表单水平居中可用四种方法：一、margin:0auto（需设固定宽度）；二、Flexbox（父容器display:flex+justify-content:center）；三、text-align+inline-block；四、绝对定位+transform。
-
复选框的:indeterminate状态只能通过JavaScript设置indeterminate属性实现，无法通过HTML属性或CSS触发；其样式需针对不同浏览器伪元素定制，父子联动需动态计算并避免事件循环；无障碍需用aria-checked="mixed"补充语义。
-
使用border-image可实现CSS边框渐变，核心是用linear-gradient定义渐变并设置border-image-slice为1，同时通过背景裁剪使文字颜色与边框呼应，注意需先定义border样式且圆角可能导致断开。
-
width:100%触发横向滚动条是因为它基于父容器contentbox计算，而padding、border、margin或min-width会额外增加总宽度；需全局启用box-sizing:border-box并对媒体元素设max-width:100%。
