CSS2与CSS3伪元素对比解析

本文深入解析了CSS2与CSS3中伪元素在语法规范上的关键演进：单冒号（:before）是CSS2遗留写法，虽对旧伪元素仍兼容，但CSS3明确要求新增伪元素（如::selection、::placeholder、::backdrop等）必须使用双冒号（::），否则将静默失效——浏览器既不报错也不渲染，极易引发难以排查的样式问题；文章不仅厘清了伪类（如:not()、:is()）与伪元素（如::before、::placeholder）的本质区别在于语义而非冒号数量，还给出了兼顾现代标准与IE兼容性的实用方案，帮你避开“写对了却没效果”的坑。

伪元素必须写 ::before 还是也能用 :before？

能用，但不推荐全用单冒号。CSS2 时代所有伪元素（如 :before、:after、:first-letter）都用单冒号；CSS3 明确要求新伪元素（如 ::selection、::placeholder、::marker）必须用双冒号，旧伪元素则「允许」单冒号写法以保兼容。

浏览器实际执行时，:before 和 ::before 效果完全一致——这不是语法错误，而是规范演进留下的过渡空间。但如果你写了 :selection，在 Chrome/Firefox 中会直接失效，必须写成 ::selection。

::placeholder 为什么不能写成 :placeholder？

因为它是 CSS3 新增的伪元素，W3C 规范强制要求双冒号。单冒号写法在现代浏览器中被忽略，连 DevTools 都不会高亮它，控制台也不会报错，只是静默失效。

• ::placeholder ✅ 正确，Chrome 57+、Firefox 51+、Safari 10.1+ 均支持
• :placeholder ❌ 不生效，即使加了 !important 也无效
• IE 完全不支持 ::placeholder（包括单/双冒号），需用 JS fallback

为什么 :not() 是伪类，而 ::backdrop 是伪元素？

判断依据不是冒号数量，而是语义：伪类描述「状态」，伪元素创建「内容容器」。

:not() 是典型的伪类——它筛选满足条件的元素，不生成新节点，也不插入内容，只改变已有元素的样式匹配逻辑；::backdrop 则是在

div::before {
  content: "✓";
}
/* IE8–9 不支持 ::before，但支持 :before */
@media screen and (min-width: 0\0) {
  div:before {
    content: "✓";
  }
}