Question

我有点不明白:before和::before之间的区别是什么。我应该使用哪一个？

Answer 1

这是为了区分伪类（例如:hover，:focus，:active）和伪元素（例如::before，::after ，::first-line）。

这是由万维网联盟（W3C）作为CSS3的一部分引入的，但由于在此语法差异之前引入了伪元素，因此浏览器支持::before和:before。 / p>

根据MDN（Mozilla开发者网络）的参考资料：

Browser            |  Lowest Version    |    Support of
-------------------+--------------------+------------------
Internet Explorer  |  8.0               |   :pseudo-element
                   +--------------------+------------------
                   | 9.0                |   :pseudo-element
                   |                    |   ::pseudo-element
-------------------+--------------------+------------------
Firefox (Gecko)    | 1.0 (1.0)          |  :pseudo-element
                   +--------------------+------------------
                   | 1.0 (1.5)          |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Opera              | 4.0                |  :pseudo-element
                   +--------------------+------------------
                   | 7.0                |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Safari (WebKit)    | 1.0 (85)           |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------

注意，来自CSS选择器建议：

当前文档引入了此::符号，以便在伪类和伪元素之间建立区别。
为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的先前单冒号表示法（即:first-line，:first-letter ，:before和:after）本规范中引入的新伪元素不允许兼容性。

参考文献：

CSS 2.1 Recommendation。

Pseudo-elements。

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script> <div ng-app="demoApp" ng-controller="mainController"> <input ng-model="search" placeholder="enter search string"></input> <div ng-repeat="(letter, group) in peoples"> <strong ng-if="filtered.length > 0">{{letter}}</strong> <div ng-repeat="people in filtered = (group | filter: search)">{{people}}</div> <br ng-if="filtered.length > 0"/> </div> </div>是更现代的版本。以::before开头的所有内容都是伪元素，以::开头的所有内容都是伪类。这种区别仅在CSS3之后才有所区别。

使用:使用此新标准版或使用::before向后兼容，因为所有浏览器都了解:before但并非所有浏览器都理解{ {1}}。

两个双点和一个伪选择器之间有什么区别

2 个答案: