最后一个孩子：在Chrome中不呈现？伪元素使用问题？ [英] last-child:after not rendering in Chrome? Pseudo-element use issue?

问题描述

我遇到了一个与Chrome的问题（在FF和Safari中工作正常，不担心IE），这让我想知道这是一个错误，如果我使用伪元素不正确，或者如果你'

会发生什么是Chrome似乎看到 content = - ; 在 last-child：after 规则后，但不呈现它。如果我打开开发人员工具，并解开一些属性（例如打开和关闭边缘），它突然出现。

这里是被剥离的代码： / p>

HTML：

 < ul> ; 
< li>一个< / li> 
< li>两个< / li> 
< li>三< / li> 
< / ul> 
 
< div id =footer> 
< p>这是一个页脚< / 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/

似乎没有无论是单独声明还是一起声明，就像我一样。

有人能告诉我我做错了什么吗？

解决方案

看起来像是一个Chrome错误。这个工作原理：

 < ul> 
< li>一个< / li> 
< li>两个< / li> 
< li id =blah>三< / li> 
< / ul> 
< div id =footer> 
< p>这是一个页脚< / p> 
< / div> 
 

通过ID引用最后一个元素的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; 
} 
 
 #blah {} 
  

编辑：Chrome已经修复了很久以前的版本

I'm running into an issue with Chrome only (works fine in FF and Safari, not worrying about IE) that makes me wonder if this is a bug, if I'm using the pseudo elements incorrectly, or if you're not supposed to combine pseudo classes and pseudo elements.

What happens is that Chrome seems to see content="-"; in the last-child:after rule, but doesn't render it. If I open the developer tools and fiddle with some of the properties (like turning the margin on and off), it suddenly shows up.

Here's the stripped down code:

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

Also here: http://jsfiddle.net/D4T6L/4/

It doesn't seem to make a difference whether I declare it separately or all together like I have it.

Can someone shed some light on what I'm doing wrong?

解决方案

Looks like a Chrome bug. This works:

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

With CSS referencing the last element by 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 { }

If you remove the "#blah{}", reverts to buggy behavior.

EDIT: This has been fixed a long time ago in Chrome

这篇关于最后一个孩子：在Chrome中不呈现？伪元素使用问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！