Google Chrome和n-last-child

时间:2013-12-07 01:35:25

标签: css css3 google-chrome css-selectors

以下CSS适用于Firefox,IE9和Gnome“Web”浏览器。

li.col:nth-child(3n+1):nth-last-child(2),
li.col:nth-child(3n+1):nth-last-child(2) + li {width: 47.5%;}

第一行应该选择最后一行的第一个孩子并将其设置为47.5%。 Firefox和Chrome都这样做。第二行应该选择相同的元素,然后将一个元素前移到网格中的最后一个子元素。在Firefox,IE9和Web中,它可以做到这一点,但在Google Chrome中没有。

有趣的是,如果您在Google Chrome中“检查元素”,则会导致倒数第二个列表元素恢复为默认宽度(.col类设置为30%)。

这是我为您设置的CodePen,可以轻松测试:http://codepen.io/anon/pen/dzbci

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

使用

 li.col:nth-child(3n+1):nth-last-of-type(2) + li {width: 47.5%;}

http://codepen.io/anon/pen/daqej