有没有什么办法指定一个CSS的简写“除了第一个/最后一个所有元素”?

通常情况下,除了第一个(或最后一个)之外,需要为所有元素指定一个CSS样式。 例如,在创build段落样式时,您希望为除最后一个元素之外的所有元素添加底部边距(或类似地,除了第一个元素之外的每个元素的顶部边距)。

有没有办法做到这一点:

  • 比定义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 +和其他浏览器的相对较新的版本。 除非您使用JavaScript或其他方式将类添加到您的第一个和最后一个子项,否则您不会在浏览器支持(IE8及更高版本)方面达到很高的地步。

请记住, stream入段落与其祖先之间的垂直边缘会崩溃 ,因此,除非您想要将这些段落的容器元素的边距清零,否则您不应该将第一个边距和第最后p元素。 这是一个小提琴来说明。

那么,你可以这样做:

 p:not(:first-child) {...} 

但是只有最新的浏览器支持:not psuedo-class。

除此之外,没有。 你最好的select是为所有人指定一个样式,然后覆盖第一个/最后一个样式。

如果不需要IE7-8的支持,你可以使用:not() CSSselect器 。

但是,如果你需要支持IE7 +,这可能仍然是一个小窍门,你可以使用,通常让你相当远。 一个鲜为人知的事实是:first-child psuedoselect器实际上在IE7 +(不是:last-child虽然)在一些其他的CSSselect器中工作 ,这使得像水平浮动布局可能的垂直边缘。

想象一下这个html:

 <ul> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> <li>Item #4</li> </ul> 

而这一些CSS:

 /* General reset */ ul, li { list-type: none; margin: 0; padding: 0; } /* Make horizontal */ ul > li { float: left; } 

所以现在所有的列表项目都是水平相邻的,现在我们想要在所有的项目中添加一个边界,但是不在右侧或者左侧,我们可以在css中做到这一点:

 /* General reset */ ul, li { list-type: none; margin: 0; padding: 0; } /* Make horizontal */ ul > li { float: left; margin-left: 10px; } ul > li:first-child { margin-left: 0; } 

这通常涵盖95%的我想要的东西独特的情况下,然后其余的“被遗忘”的select器覆盖了几个百分比 ,之后,你需要添加一些类,通常没有太多的瓶颈在无论如何在后端这一页。

我build议使用第一种types:

p:不是(:first-of-type){…}

http://caniuse.com/#search=first-of-type