很多时候,自然需要为除第一个(或最后一个)之外的所有元素指定CSS样式。例如,在设计段落时,您希望为除最后一个元素之外的每个元素添加一个底边距(或类似地,除第一个元素之外的每个元素的顶边距)。
有什么办法做到这一点:
>比定义p {…}更简洁,然后p:first-child {…}?
>比p:nth-child(-n 1)更直接和直观?
如果没有,你知道有任何尝试添加它吗?
解决方法
对于除第一个孩子之外的所有p个元素,请使用其中的一个(第二个更好地支持):
p:not(:first-child) p:first-child ~ p
对于除最后一个孩子之外的所有p个元素:
p:not(:last-child)
对于除了第一个和最后一个孩子之外的所有p个元素:
p:not(:first-child):not(:last-child)
像往常一样,CSS3的:not()和:last-child不支持,直到IE9和其他浏览器的相对新版本。你不会达到非常远的浏览器支持(IE8和更旧),除非你添加类到你的第一个和最后一个孩子,使用JavaScript或其他。
记住vertical margins collapse between in-flow paragraphs and their ancestor(s),所以除非你想要清除这些段落的容器元素的边距,你不应该需要清除第一个和最后一个p元素的边距。这里是一个fiddle来说明。