相邻的兄弟选择器和:Chrome 10中的伪元素之前

时间:2011-04-14 17:11:13

标签: css google-chrome css-selectors pseudo-element

这很奇怪。 http://www.madebypaz.com/profile上的<OL>使用:before伪元素作为图表的注释(ABC和图像)。我这样使用adjecent兄弟选择器:

#profiletext ol li:before {
    content: 'A';
    }

#profiletext ol li+li:before {
    content: 'B';
    }

#profiletext ol li+li+li:before {
    content: 'C';
    }

#profiletext ol li+li+li+li:before {
    content: '';
    }

#profiletext ol li+li+li+li {
    background: url('/wp-content/themes/paz2010/images/sweet-spot.png') no-repeat;
    margin-left: 0;
    padding-left: 38px;
    }

#profiletext ol li {
    height: 30px;
    margin-left: 10px;
    }

这可能不是最优雅的解决方案,但它在包括Chrome在内的所有浏览器中都能完美运行,直到有人向我指出它在Chrome 10中中断。在Chrome 10中,它显示AAA并在鼠标悬停时更改为正确的字符。这很奇怪,因为甚至没有定义:悬停样式!

以下是此屏幕录制内容:http://cl.ly/0E170v1Z0O2E0f3F0j0d

为什么会这样,我该如何解决?有没有更好的方法来实现相同的结果?

任何指针都非常感谢!

1 个答案:

答案 0 :(得分:0)

这在Chrome 16上正常运行 - 需要进行简单更新。