伪类

精选推荐

最新动态

css:nth-child与:nth-of-type伪类如何高效使用_快速选择指定位置元素

2026年2月23日

因为 :nth-child 只看「父元素下所有子元素的顺序位置」，不区分标签类型。比如一个 <div> 前面有 <code><p></p> 和 <span></span>，那它可能是第 3 个子元素，但不是第 1 个 <div>。 <p>常见错误现象：<code>ul li:nth-child(2) 想选第二个 <li>，结果没生效——很可能是因为 <ul></ul> 里第一个子元素是注释、空格文本节点，或意外插入了其他标签（如 <div class="ad">）。 <ul> <li>使用前先用浏览器开发者工具检查父容器的「真实子节点结构」，右键 →「Edit as HTML」可看清隐藏节点</li> <li>若父元素中混有多种标签且目标元素不连续，优先考虑 <code>:nth-of-type

:nth-child(n) 的 n 从 1 开始计数，:nth-child(0) 无效

什么时候必须用 :nth-of-type？

CSS点击后的震动反馈_模拟移动端APP的错误提醒交互

2026年2月21日

移动端点击震动不是靠 :active 拉伸或变色凑数，它得有明确的位移+时间节奏。CSS 的 :active 生命周期太短、不可控，且在部分 iOS Safari 上会跳过（尤其配合 touch-action: manipulation 时），直接导致震动“没感觉”。

CSS溢出内容处理_overflow属性的scroll、hidden与auto

2026年2月20日

很多人用 overflow: scroll 是想“确保能滚动”，结果发现滚动条永远存在，占空间、影响布局，尤其在 macOS 上还带惯性滚动干扰点击。这不是 bug，是规范行为：scroll 的语义就是「始终启用滚动机制」，浏览器必须渲染滚动条（哪怕没内容可滚）。

CSS伪类:read-only与:read-write_只读状态的样式美化

2026年2月20日

浏览器只认 DOM 属性 readonly（布尔属性），不看 contenteditable="false" 或 disabled，也不管 JS 是否锁了输入逻辑。哪怕你用 input.setAttribute(‘readonly’, ‘readonly’)，只要属性存在，:read-only 就生效；删掉就失效。

CSS过渡在SVG元素上的应用_改变路径填充色与描边宽度

2026年2月19日

能，但有硬性前提：这两个属性必须是内联样式或通过 CSS 类控制，且不能被行内 style 属性“冻结”覆盖。浏览器对 SVG 原生属性的动画支持比想象中更保守——比如直接写在 SVG 标签上的 fill="red" 不会响应 CSS transition，哪怕你后面加了类名。