有没有什么办法指定一个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器覆盖了几个百分比 ,之后,你需要添加一些类,通常没有太多的瓶颈在无论如何在后端这一页。