gpt4 book ai didi

html - last-child :after not rendering in Chrome? 伪元素使用问题?

转载 作者:太空狗 更新时间:2023-10-29 15:36:29 25 4
gpt4 key购买 nike

<分区>

我遇到了一个只有 Chrome 的问题(在 FF 和 Safari 中工作正常,不用担心 IE)这让我想知道这是不是一个错误,如果我使用伪元素不正确,或者如果你'我们不应该组合伪类和伪元素。

发生的事情是 Chrome 似乎在 last-child:after 规则中看到了 content="-";,但没有呈现它。如果我打开开发人员工具并摆弄一些属性(例如打开和关闭边距),它会突然出现。

这是精简代码:

HTML:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<div id="footer">
<p>This is a footer</p>
</div>

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/

无论我单独声明还是像我一样一起声明似乎都没有什么区别。

有人可以阐明我做错了什么吗?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com