2023年6月20日发(作者：)
css中的伪类after与before失效？说说其注意点⼀、来个⼩⼩的叙事先：
⼀段时间之前在跟着boss做⼀个项⽬的时候boss教了我⼀个偷懒的技巧，嘛，当时还是刚⼊门啥都不会啊，学个偷懒的技巧什么的我在⼼⾥还真是默默的吐槽了⼀下。boss说有些页⾯写的时候可以通过写after或before的伪类来达到页⾯的效果，例如说写表单时label后⾯可以加如 “*密码由数字，字母和下划线组成 ” 的红⾊注意标语。或者加个⼩图标啥的，然后他⼜笑呵呵的说：“写了这些之后别⼈还不⼀定知道你这效果是怎么实现的”，不看控制台的话，若是当初的我肯定想着这⼀定是在元素的后⾯加了span然后写⼀段恼⼈的定位样式什么absolute啊什么relative啊之类的，但当⼀看控制台却发现你还不能直接 ⾼亮 到这部分，然后好奇的⾃⼰只能点击它的“⽗类”看看这咋实现的，⼀看这样式，这才知道全写到伪类去了。。我⼼想着：呵呵，这懒偷得真好，还能装装逼，服了。。说真话，这也不是偷懒，这是技巧，能⽅便⼈的东西都是好东西，更别说coder更加注重⽅便性了。⼆、after与before其实after与before⽤法是⼀样的，只是显⽰的位置不⼀样⽽已。那这⾥就举after为例好了。:after 选择器在被选元素的内容后⾯插⼊内容。这是它的定义吧。它有⼀个属性 content 这属性意味着这元素后⾯要插⼊什么内容。图⽂并茂才容易理解，上图。
margin-left: 10px;}.box:before{ content: "hello"; color: #888; font-size: 12px; margin-right: 10px;}这张截图就是上⾯代码效果，不要介意这个背景颜⾊不是⽩⾊，但样式⾥⾯没写，这是我浏览器设置的背景颜⾊，如图⽰，这只要带有class=“box”的元素都会带上hi，这是伪类after，那么顾名思义的这个hello，就是before的伪类的效果，很容易理解吧。三、什么东西只要⽤到就得看看说明书，这东西我们要注意使⽤规范，别弄到⾃⼰狼狈还怪这东西的问题。这after和before有什么要注意的。我们的思考能⼒让这个注意点有很多可能。1.：after和：before 说：只要你⽤到我，你就得把我的属性content带上，不然我给你⼲活。这after跟before就⼀个属性content，所以必须带上它，不然失去了content的意义了。如果不写content，那不好意思，不能显⽰你要插⼊的东西。即使你的content为空。如若不信，且看看下⾯的。html同样的，我就把.box：after改了下，去掉了content属性.box{ margin: 20px; font-size: 28px;}/*.box:after{ content: 'hi'; font-size: 14px;
margin-left: 10px;}*/.box:before{ content: "hello"; color: #888; font-size: 12px; margin-right: 10px;}.box:after{ border:#00f solid 5px; border-width: 5px 5px 0 0 ;}显然跟前⾯的那张图⽐较，这张图中.box的元素后⾯看不到after的样式，这理应在上边和右边有蓝⾊的粗线的边框，然⽽没有了。若我就要求没有content，我不需要加内容只加样式，那⿇烦把content以空的形式写进去。.box:after{ content:""; border:#00f solid 5px; border-width: 5px 5px 0 0 ;}这就出来了嘛，然后你再看清楚些，却发现这也不是border-width：5px 5px 0 0；的样式，说好的右上边框呢？那是因为你的content啥都没有，没有宽度怎么实现右上边框啊。。.box:after{ content:"hi!"; border:#00f solid 5px; border-width: 5px 5px 0 0 ;}这不就出现右上边框了嘛。2.这content是个好东西，不只是字符串，它⽤途丰富啊！content有四种可以写进去的东西：attr(attr-name)、字符串、url()/uri()、counter()字符串不解释。说说剩下的⼏个好了。attr(attr-name), 伪元素的内容跟主元素的某个属性值进⾏关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图⽚加载失败⽤⼀段⽂字替换。url()/uri(), 引⽤外部资源，例如图⽚；counter(), 调⽤计数器，可以不使⽤列表元素实现序号问题。⽂字不好说明，这⾥给出些例⼦。1）、attr().box:after{ color: green; content: attr(id); margin-left: 10px;} 这⾥⾯content是关联了元素的id属性，凡是还有box的类都在后⾯打印出它们各⾃的id值，当然 这 attr属性可以是⾃⼰⾃创的属性名，只要在对应元素中写⼊这个属性名就好content: attr(user_id);
content:"(" counter(boxnum) ")"; margin-left: 10px;} 其实这个counter()不只是⽤在伪类上⾯，这是css3⾥⾯的样式函数，哪都能⽤，具体的⾃⼰去了解⼀下这个函数吧。有些地⽅这个函数我也不清不楚的，就不说了。最常⽤的应该是这四种情况的了。3.其他知识点1）伪元素即伪类，它是⼀个元素的⼦元素，其意思就是说，我们⽆法⽤JS获取到这些伪元素，我们⽆法通过JS对其进⾏增、删、改，所以这也是它们的优点，因为它们不会增加JS查询DOM的负担，即对于JS来说伪元素是透明的。然后因为它们也不是实际的HTML标签，所以可以加快浏览器加载HTML⽂件，对SEO也有帮助（SEO 搜索引擎优化）。2）如果我们把伪类的样式有absolute定位的话会把伪类强制变成块级元素，伪类本⾝是⾏内元素的。3）img、input和其他的单标签是没有after和before伪元素的，因为单标签本⾝不能有⼦元素。上述总结⾃《⾼效前端》。伪类使⽤起来是很⽅便的，在写页⾯的时候它能够简化页⾯的HTML标签，如果能善于使⽤伪元素，这能够⼤⼤使我们所写的页⾯更加简洁优雅，并且还能默默的装⼀下逼，这代码看上去更加⾼⼤上（笑）。伪元素好⽤但也不能滥⽤，毕竟这伪类只是页⾯辅助性视觉元素，重点是视觉性的，这可不能因为能省事就滥⽤伪元素，如果内容本⾝是页⾯内容，需要有动态交互的话就不要⽤伪元素了。
2023年6月20日发(作者：)
css中的伪类after与before失效？说说其注意点⼀、来个⼩⼩的叙事先：
⼀段时间之前在跟着boss做⼀个项⽬的时候boss教了我⼀个偷懒的技巧，嘛，当时还是刚⼊门啥都不会啊，学个偷懒的技巧什么的我在⼼⾥还真是默默的吐槽了⼀下。boss说有些页⾯写的时候可以通过写after或before的伪类来达到页⾯的效果，例如说写表单时label后⾯可以加如 “*密码由数字，字母和下划线组成 ” 的红⾊注意标语。或者加个⼩图标啥的，然后他⼜笑呵呵的说：“写了这些之后别⼈还不⼀定知道你这效果是怎么实现的”，不看控制台的话，若是当初的我肯定想着这⼀定是在元素的后⾯加了span然后写⼀段恼⼈的定位样式什么absolute啊什么relative啊之类的，但当⼀看控制台却发现你还不能直接 ⾼亮 到这部分，然后好奇的⾃⼰只能点击它的“⽗类”看看这咋实现的，⼀看这样式，这才知道全写到伪类去了。。我⼼想着：呵呵，这懒偷得真好，还能装装逼，服了。。说真话，这也不是偷懒，这是技巧，能⽅便⼈的东西都是好东西，更别说coder更加注重⽅便性了。⼆、after与before其实after与before⽤法是⼀样的，只是显⽰的位置不⼀样⽽已。那这⾥就举after为例好了。:after 选择器在被选元素的内容后⾯插⼊内容。这是它的定义吧。它有⼀个属性 content 这属性意味着这元素后⾯要插⼊什么内容。图⽂并茂才容易理解，上图。
margin-left: 10px;}.box:before{ content: "hello"; color: #888; font-size: 12px; margin-right: 10px;}这张截图就是上⾯代码效果，不要介意这个背景颜⾊不是⽩⾊，但样式⾥⾯没写，这是我浏览器设置的背景颜⾊，如图⽰，这只要带有class=“box”的元素都会带上hi，这是伪类after，那么顾名思义的这个hello，就是before的伪类的效果，很容易理解吧。三、什么东西只要⽤到就得看看说明书，这东西我们要注意使⽤规范，别弄到⾃⼰狼狈还怪这东西的问题。这after和before有什么要注意的。我们的思考能⼒让这个注意点有很多可能。1.：after和：before 说：只要你⽤到我，你就得把我的属性content带上，不然我给你⼲活。这after跟before就⼀个属性content，所以必须带上它，不然失去了content的意义了。如果不写content，那不好意思，不能显⽰你要插⼊的东西。即使你的content为空。如若不信，且看看下⾯的。html同样的，我就把.box：after改了下，去掉了content属性.box{ margin: 20px; font-size: 28px;}/*.box:after{ content: 'hi'; font-size: 14px;
margin-left: 10px;}*/.box:before{ content: "hello"; color: #888; font-size: 12px; margin-right: 10px;}.box:after{ border:#00f solid 5px; border-width: 5px 5px 0 0 ;}显然跟前⾯的那张图⽐较，这张图中.box的元素后⾯看不到after的样式，这理应在上边和右边有蓝⾊的粗线的边框，然⽽没有了。若我就要求没有content，我不需要加内容只加样式，那⿇烦把content以空的形式写进去。.box:after{ content:""; border:#00f solid 5px; border-width: 5px 5px 0 0 ;}这就出来了嘛，然后你再看清楚些，却发现这也不是border-width：5px 5px 0 0；的样式，说好的右上边框呢？那是因为你的content啥都没有，没有宽度怎么实现右上边框啊。。.box:after{ content:"hi!"; border:#00f solid 5px; border-width: 5px 5px 0 0 ;}这不就出现右上边框了嘛。2.这content是个好东西，不只是字符串，它⽤途丰富啊！content有四种可以写进去的东西：attr(attr-name)、字符串、url()/uri()、counter()字符串不解释。说说剩下的⼏个好了。attr(attr-name), 伪元素的内容跟主元素的某个属性值进⾏关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图⽚加载失败⽤⼀段⽂字替换。url()/uri(), 引⽤外部资源，例如图⽚；counter(), 调⽤计数器，可以不使⽤列表元素实现序号问题。⽂字不好说明，这⾥给出些例⼦。1）、attr().box:after{ color: green; content: attr(id); margin-left: 10px;} 这⾥⾯content是关联了元素的id属性，凡是还有box的类都在后⾯打印出它们各⾃的id值，当然 这 attr属性可以是⾃⼰⾃创的属性名，只要在对应元素中写⼊这个属性名就好content: attr(user_id);
content:"(" counter(boxnum) ")"; margin-left: 10px;} 其实这个counter()不只是⽤在伪类上⾯，这是css3⾥⾯的样式函数，哪都能⽤，具体的⾃⼰去了解⼀下这个函数吧。有些地⽅这个函数我也不清不楚的，就不说了。最常⽤的应该是这四种情况的了。3.其他知识点1）伪元素即伪类，它是⼀个元素的⼦元素，其意思就是说，我们⽆法⽤JS获取到这些伪元素，我们⽆法通过JS对其进⾏增、删、改，所以这也是它们的优点，因为它们不会增加JS查询DOM的负担，即对于JS来说伪元素是透明的。然后因为它们也不是实际的HTML标签，所以可以加快浏览器加载HTML⽂件，对SEO也有帮助（SEO 搜索引擎优化）。2）如果我们把伪类的样式有absolute定位的话会把伪类强制变成块级元素，伪类本⾝是⾏内元素的。3）img、input和其他的单标签是没有after和before伪元素的，因为单标签本⾝不能有⼦元素。上述总结⾃《⾼效前端》。伪类使⽤起来是很⽅便的，在写页⾯的时候它能够简化页⾯的HTML标签，如果能善于使⽤伪元素，这能够⼤⼤使我们所写的页⾯更加简洁优雅，并且还能默默的装⼀下逼，这代码看上去更加⾼⼤上（笑）。伪元素好⽤但也不能滥⽤，毕竟这伪类只是页⾯辅助性视觉元素，重点是视觉性的，这可不能因为能省事就滥⽤伪元素，如果内容本⾝是页⾯内容，需要有动态交互的话就不要⽤伪元素了。
发布评论