如何“添加细节”到CSS（示例框阴影）

Question

我正在制作一个导航栏，基本上我在底部，左侧（第一个孩子）和右侧（最后一个孩子）都有盒子阴影。

我的结构是<ul><li><a><span>

我在ul li a { 0 1px 0 0 green }的底部有框阴影，并希望在第一个和最后一个元素ul li:first-child a { -1px 0 0 0 red }的两侧添加框阴影。但是，使用:first-child选择器覆盖了box-shadow属性...有没有办法可以说“将-1px 0 0 0红色添加到上一个框阴影样式”。

希望我有意义。这是一个演示：http://jsfiddle.net/LJj2p/

谢谢！

Answer 1

没有。你不能将box-shadow添加到有一个的地方，因为它会覆盖它（或者更具体地说，具有更高特异性的那个获胜）。您需要为:first-child / :last-child案例同时定义两个阴影。

但是，使用伪元素you can effectively "add" a shadow，虽然它没有真正添加它。