css - 如何向 CSS 中“添加细节”（例如 Box shadow）

Question

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

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

我在底部有 box-shadows ul li a { 0 1px 0 0 green }，并且想在第一个和最后一个元素的侧面添加 box-shadow ul li:first-child a { -1px 0 0 0 red }。但是，box-shadow 属性正在被:first-child选择器覆盖......有没有办法可以说“将 -1px 0 0 0 red 添加到以前的 box-shadow 样式”。

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

谢谢！

Answer 1

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

但是，使用伪元素可以有效地“添加”一个阴影，尽管它并没有真正添加它。