Question

我遇到了Chrome浏览器的问题（在FF和Safari中运行正常，不用担心IE）这让我想知道这是不是一个错误，如果我错误地使用了伪元素，或者你是'不应该将伪类和伪元素组合起来。

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/

我是单独声明它还是像我拥有它一样声明它似乎没有什么区别。

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

Answer 1

看起来像是一个Chrome错误。这有效：

<ul>
  <li>One</li>
  <li>Two</li>
  <li id="blah">Three</li>
</ul>
<div id="footer">
  <p>This is a footer</p>
</div>

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

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;
}

#blah { }

如果删除“#blah {}”，则会恢复错误行为。

编辑：很久以前在Chrome中修复了这个问题

Answer 2

这是Chrome中的一个错误，已经在Dev频道版本中得到修复，因此只需时间就可以解决它在Stable中的问题。（见关于这个问题的评论）

这是一个错误报告：

http://code.google.com/p/chromium/issues/detail?id=71213

这是另一个：

http://code.google.com/p/chromium/issues/detail?id=71052

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

2 个答案: