::before vs :before

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

注意双冒号 ::before 与单冒号 :before。 哪个是正确的?

从技术上讲,正确答案是 ::before。 但这并不意味着您应该自动使用它。

情况是

  • 双冒号选择器是伪元素。
  • 单冒号选择器是伪选择器。

::before 绝对是伪元素,因此应该使用双冒号。

伪元素和伪选择器之间的区别已经很令人困惑。 幸运的是,::after::before 相当简单明了。 它们实际上在页面中添加了一些新内容,一个元素。

但是,像 ::first-letter 这样的东西也是伪元素。 我在脑子里是这样推断的,它正在选择一个没有现有 HTML 元素的部分。 目标的第一个字母周围没有 <span>,因此该第一个字母几乎就像您在页面中添加的新元素。 这与伪选择器不同,伪选择器选择已经存在的元素,例如 :nth-child(2) 或其他。

即使 ::before 是一个伪元素,并且双冒号是使用伪元素的正确方法,您应该这样做吗?

有一种论点认为您也许应该使用 :before,其论据如下

  1. Internet Explorer 8 及更低版本只支持 :before,不支持 ::before
  2. 所有现代浏览器都以这两种方式支持它,因为大量网站使用 :before,并且浏览器非常重视向后兼容性。
  3. 嘿,它少了一个字符,这算是一个额外的好处。

我听说有人说他们的 CSS 规范器要求(或自动执行)它们为单冒号。 就个人而言,我不介意人们这样做。 似乎还不错。 我更重视一致性,而不是您选择哪种方式。

另一方面,也有一个论点支持使用 ::before,其论据如下

  1. 单冒号伪元素是一个错误。 将不会再有使用单冒号的伪元素。
  2. 如果您在脑海中明确区分了它们,不妨训练您的手指以正确的方式使用它们。
  3. 这已经足够令人困惑了,所以我们不妨遵循规范的方式。

我已经将我的规范器设置为强制我使用双冒号。 我反正不支持 Internet Explorer 8,而且以“正确”的方式做事感觉很好。