Google Chrome和第n个last-child [英] Google Chrome and nth-last-child

问题描述

以下CSS适用于Firefox，IE9和GnomeWeb浏览器。

The following CSS works in Firefox, IE9, and the Gnome "Web" browser.

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都做到了。第二行应该选择相同的元素，但向前移动一个元素到网格中的最后一个子元素。

The first line should select the last row's first child and set it to 47.5%. Firefox and Chrome both do this. The second line should select the same element but then move forward one element to the last child in the grid. In Firefox, IE9, and Web it does this but in Google Chrome does not.

有趣的是，如果你在Google Chrome中检查元素，它会导致第二个到最后一个列表元素以恢复到其默认宽度（由.col类设置的30％）。

Interestingly if you "inspect element" in Google Chrome it causes the second to last list element to revert back to its default width (30% as set by the .col class).

这里是一个CodePen我设置为你轻松测试： http://codepen.io/anon/pen/dzbci

Here's a CodePen I set up for you to easily test: http://codepen.io/anon/pen/dzbci

任何帮助都会感激。

推荐答案

使用

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

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

这篇关于Google Chrome和第n个last-child的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！