2

我.foo在样式表中应用了一个 box-shadow 属性：

.foo {
  box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset;
}

box-shadow现在，我想在不覆盖现有属性的情况下，为多个具有不同动态生成值的 div 添加另一个选项：

<div class="foo" style="box-shadow: 0 -5px 0 0 red inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 blue inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 green inset">
</div>

第一个 div 的结果应如下所示：

box-shadow: 0 -5px 0 0 red inset, 
  0 0 10px 0 #000000 inset, 
  0 0 2px 0 #3C3C3C inset

我怎么能这样做？非常感谢。

4

2 回答 2

2

使用您的内联样式，新规则将简单地覆盖旧规则。我能想到只使用 CSS 的唯一方法是使用绝对定位的伪元素，尽管这也取决于您.foo的相对定位。

CSS

.foo:after {
    position: absolute;
    content: '';
    top: 0; right: 0; bottom: 0; left: 0;
    box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset
}

.foo {
    position:relative;
    width:100px; /* added for demo */
    height:100px; /* added for demo */
}

jsFiddle 演示

于 2013-05-01T09:41:25.303 回答
1

jQuery中这样的东西应该可以工作：

var currentBoxShadow = $('.foo').css("box-shadow");
$('.foo').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);
currentBoxShadow = $('.bar').css("box-shadow");
$('.bar').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);

如果您希望它们都属于同一类，则 nth-child 选择器可能会有所帮助：

var currentBoxShadow = $('.foo:nth-child(2)').css("box-shadow");
$('.foo:nth-child(2)').css("box-shadow", "0 -5px 0 0 #F00, " + currentBoxShadow);
于 2013-05-01T09:20:53.857 回答