:aftr和 :: after区别，顺便谈一谈CSS的伪类和伪元素

àì夳堔傛蜴生んèń 2022-10-02 09:49 23阅读 0赞

在搞小程序的时时候会用到人家的组件button，人家弄了这个组件必然会设置一些默认值，比如边框。要想把这个边框弄没，就要用一下button::after这个来处理一下。  
类似下面这样：

button::after {
      border: none
    }

这时候::after是什么东西？怎么起到作用的？还有一个:after这个是什么东西，之间有什么联系？

其实在使用的方面上其实两者差不多，我在同一个项目中两者都看到，甚至有的两者之间的内容是相同的。都是在指定的选择器后添加输你的 :: after(或：after)你定义的CSS样式，使其生效。after就是在你加载后再添加，同理:before 和 :: before也是这样的，只不过是在选择器在前加。

但是其实不一样，首先 ：表示的是伪类 pseduo-classes ，:: 表示的是为元素 pseduo-elements。在CSS1CSS2两者定义是没区别的，出了个CSS3标准要区分开两者，所以你看有的代码用 ：和：：的都有，两者的区别，首先看一下官方英文文档感受一下定义：  
**伪类 pseduo-classes:**  
Pseudo-classes are simple selectors that permit selection based on information that lies outside of the document tree or that can be awkward or impossible to express using the other simple selectors. They can also be dynamic, in the sense that an element can acquire or lose a pseudo-class while a user interacts with the document, without the document itself changing. Pseudo-classes do not appear in or modify the document source or document tree.

**伪元素：pseduo-elementd：**  
Similar to how certain pseudo-classes represent additional state information not directly present in the document tree, a pseudo-element represents an element not directly present in the document tree. They are used to create abstractions about the document tree beyond those provided by the document tree. For example, pseudo-elements can be used to select portions of the document that do not correspond to a document-language element (including such ranges as don’t align to element boundaries or fit within its tree structure); that represent content not in the document tree or in an alternate projection of the document tree; or that rely on information provided by styling, layout, user interaction, and other processes that are not reflected in the document tree.

还有就是我看了一下CSS官方文档，没有看见：after伪类的说明，到是伪元素的::after有专门的example，其他的一些文档比如菜鸟什么的虽然有 :after 但是 归类为伪元素，甚至同一个页面有:after和::after混着来的。如下图，有的时候你看到的:after和::after是一个意思，都表示为伪元素，只不过是一个是之前的没有进行区分的CSS2甚至CSS1的规则，有的是区分伪类和伪元素的CSS3规则。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]  
\[CSS官方文档\]:([https://www.w3.org/TR/selectors-4/\#pseudo-classes][https_www.w3.org_TR_selectors-4_pseudo-classes])  
自己的公众号：我是坑货  
![在这里插入图片描述][20190620200853324.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]: /images/20220113/3c97eece2b26401983fbf44f2a89282a.png
[https_www.w3.org_TR_selectors-4_pseudo-classes]: https://www.w3.org/TR/selectors-4/#pseudo-classes
[20190620200853324.jpg]: https://img-blog.csdnimg.cn/20190620200853324.jpg