选择器

精选推荐

最新动态

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伪元素::first-line应用_打造报刊排版的首行效果

2026年2月22日

因为它的样式作用范围极小，且受制于父元素的显示类型和内容结构。最常见的情况是：父元素用了 display: flex 或 display: grid，或者里面包裹了 <span></span>、<strong></strong> 这类内联子元素——这些都会打断首行的“连续文本流”，导致 ::first-line 完全不生效。

Odoo 12 与 Odoo 14 JavaScript 组件兼容性差异详解

2026年2月21日

本文解析 odoo 12 中无法运行 odoo 14 标准 js 小部件代码的根本原因——`web.public.widget` 在 odoo 12 中尚未引入，需降级适配为 `website.snippet.editor` 或 `core.widget` 并调整生命周期方法。

CSS颜色变量var()应用_在大型项目中实现一键换肤

2026年2月21日

很多人以为 var(–color-primary) 和 JS 里的 let 一样能随时重赋值，其实它只是个“占位符”——真正起作用的是它背后绑定的 :root 或其他选择器里声明的 –color-primary: #007bff。换肤本质是切换这些自定义属性的值，不是改 var() 本身。

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

2026年2月20日

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