相关疑难解决方法(0)

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

会发生什么是Chrome似乎content="-";在last-child:after规则中看到,但不会呈现它.如果我打开开发人员工具并摆弄一些属性(比如打开和关闭边距),它会突然显示出来.

这是精简代码:

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/

我是单独宣布它还是像我拥有它一样宣布它似乎没有什么区别.

有人能否解释我做错了什么？