伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布

易烊千鹤

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量184

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_46051988/article/details/109188568

版权

2 篇文章 0 订阅

订阅专栏

伪元素即伪类，它是一个元素的子元素，其意思就是说，我们无法用JS获取到这些伪元素，我们无法通过JS对其进行增、删、改，所以这也是它们的优点，因为它们不会增加JS查询DOM的负担，即对于JS来说伪元素是透明的。然后因为它们也不是实际的HTML标签，所以可以加快浏览器加载HTML文件，对SEO也有帮助（SEO 搜索引擎优化）。
如果我们把伪类的样式有absolute定位的话会把伪类强制变成块级元素，伪类本身是行内元素的。
img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素。

before，after

after和：before 说：只要你用到我，你就得把我的属性content带上，不然我给你干活。这after跟before就一个属性content，所以必须带上它，不然失去了content的意义了。如果不写content，那不好意思，不能显示你要插入的东西。即使你的content为空。

如若不信，且看看下面的。html同样的，我就把.box：after改了下，去掉了content属性
这content是个好东西，不只是字符串，它用途丰富啊！
content有四种可以写进去的东西：attr(attr-name)、字符串、url()/uri()、counter()

字符串不解释。说说剩下的几个好了。

attr(attr-name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。

url()/uri(), 引用外部资源，例如图片；

counter(), 调用计数器，可以不使用列表元素实现序号问

题

关注