html – last-child：在Chrome中渲染后？伪元素使用问题？

发布时间：2020-12-14 23:01:59 所属栏目：资源来源：网络整理

导读：我只遇到Chrome的问题(在FF和Safari中运行正常,不用担心IE)这让我想知道这是不是一个bug,如果我错误地使用伪元素,或者你不应该组合伪类和伪元素. 会发生什么是Chrome似乎看到content =“ ”;在最后一个孩子：在规则之后,但不渲染它.如果我打开开发人员工具并

我只遇到Chrome的问题(在FF和Safari中运行正常,不用担心IE)这让我想知道这是不是一个bug,如果我错误地使用伪元素,或者你不应该组合伪类和伪元素.

会发生什么是Chrome似乎看到content =“ – ”;在最后一个孩子：在规则之后,但不渲染它.如果我打开开发人员工具并摆弄一些属性(比如打开和关闭边距),它会突然显示出来.

这是精简代码：

HTML：


CSS：

ul { text-align: center; }

#footer { text-align: center; margin-top: 200px;}

li:first-child:before,li:last-child:after,#footer:before {
    display: block;
    content: "-";
    color: red;
    margin: 10px 0;
}

也在这里：http://jsfiddle.net/D4T6L/4/
我是单独宣布它还是像我拥有它一样宣布它似乎没有什么区别.
有人能否解释我做错了什么？


最佳答案
看起来像Chrome错误.这有效：


使用CSS通过ID引用最后一个元素：

ul { text-align: center; }   

#footer { text-align: center; margin-top: 200px;}

li:first-child:before,#footer:before {
   display: block;
   content: "-";
   color: red;
   margin: 10px 0;
}

#blah { }

如果删除“#blah {}”,则会恢复错误行为.
编辑：这已经很久以前在Chrome中得到修复

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!