关于css选择器：CSS”::”含义

yiyan • • 问答 • 334 阅读

CSS "::" meaning

本问题已经有最佳答案，请猛点这里访问。

我经常看到这种用法。特别是伪类。
CSS 中的"::" 是什么意思？

.a_demo_three::before {

来自 MDN：

Sometimes you will see double colons (::) instead of just one (:).
This is part of CSS3 and an attempt to distinguish between
pseudo-classes and pseudo-elements. Most browsers support both values.

所以，当你想使用 :hover、:first-child 等伪类时，请使用单个冒号。如果要使用伪元素，如 ::before、::after、::first-letter 等，请使用双冒号。

还有一点需要注意：W3C 规定浏览器应该只接受 CSS 3 中引入的伪元素的 :: 表示法，所以你应该遵循上面的建议 🙂

相关讨论

  • :first-child 和 ::first-letter 它们都指向元素有什么区别，我错过了什么？
  • 哪些浏览器严格遵循这一点？ :: 有什么问题吗？
  • 我不这么认为，但我记得 placeholder 元素在旧 FF/Chrome 版本中需要 ::。 @Itay first-letter 将针对元素的第一个字母，而不是第一个元素
  • 尽管如此，它还是针对一个真实的元素，而 :hover 是一个事件......它是 Itay，没有 L 😉
  • 好的 - 浏览了文档。 ::first-child 绝对是"伪元素"的一部分：描述状态(事件)和 :: 真实元素，它们总是存在的。
  • 不是。 first-child 也描述了状态，即。该元素当前是 X 的第一个子元素。而 first-letter 描述了一个应该始终存在的"虚拟"元素
  • 以及我会在页面上执行哪些用户操作来更改第一个孩子的状态？
  • 您可以使用 javascript 移动元素。这在伪元素上是不可能的
  • 感谢您的回复，这里正在进行精彩的讨论！
  • @One Trick Pony：只有 Firefox 需要双冒号——我相信从第 19 版开始它已更改为单冒号。 Chrome 一直使用一个冒号。
  • @Itay Moav -Malimovka：:hover 不是一个事件，它是一个状态，就像 :first-child 一样。事件和状态是两个非常不同的东西。有关更多信息，请参见此答案。 ::first-letter 是一个虚拟元素，它被创建为一个真实元素的"子"。
  • @Nico：IE8 及更早版本不理解双冒号语法。如果您必须支持旧版浏览器，请对 :first-letter、:first-line、:before 和 :after 使用单冒号。如果您不需要，请使用 W3C 推荐的双冒号。
以上是关于css选择器：CSS”::”含义的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>