有没有办法为“除第一/最后一个”之外的所有元素指定CSS速记?

前端之家收集整理的这篇文章主要介绍了有没有办法为“除第一/最后一个”之外的所有元素指定CSS速记?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
很多时候,自然需要为除第一个(或最后一个)之外的所有元素指定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来说明。

猜你在找的CSS相关文章