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

Question

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

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

我对底部ul li a { 0 1px 0 0 green }箱的阴影，并希望在两侧添加的box-shadow第一和最后一个元素ul li:first-child a { -1px 0 0 0 red }。然而，box-shadow属性正在被:first-child选择器覆盖...有没有一种方法可以说“add -1px 0 0 0 red to the previous box-shadow style”。

希望我说得通。这里有一个演示：http://jsfiddle.net/LJj2p/

谢谢！

Answer 1

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

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