使用css增加html元素的属性值？

Question

是否可以创建一个css类/ id，它会将值（例如，填充）添加到另一个类的相同属性值？

让我试着更清楚地说明一下。

.someClass{
padding: 20px;
}

.thickenMe{
padding: 5px;
}

当我按照以下方式应用这些课程时，

<div class='someClass thickenMe'>
<!--planning to beef up this div-->
</div>

这个div的净填充应该变成25px。

是否可以仅使用css？这只是一个想法！

Answer 1

使用纯CSS无法做到这一点。

但是，您可以为每个可以“加厚”的元素编写一个CSS子句，如下所示：

.someClass{
padding: 20px;
}

.someClass.thickenMe{
padding: 25px;
}

另一种选择是使用边距和填充，如下所示：

.someClass{
padding: 20px;
}

.thickenMe{
margin: 5px;
}

但这可能无法实现，具体取决于您的其他CSS。

最简单的解决方案，虽然不是纯CSS，但是使用JavaScript。以下是使用JQuery的示例：

var prevPad = $('.thickenMe').css('padding').replace("px", "");
prevPad =  parseInt(prevPad);
$('.thickenMe').css('padding', prevPad + 5 + "px");​

Answer 2

没有。如果要动态更改属性，则需要使用客户端脚本（即JavaScript）。或者，如果您只想通过从某些动态来源进行编译来定义样式，请尝试LESS或SASS。

Answer 3

不幸的是，没有。您可以通过使用像LESS这样的CSS处理器来获得这种功能，它可以为您提供变量，或者您可以通过客户端脚本（使用jQuery最简单）来处理它，但是原生CSS根本无法工作办法。当类指定相同的属性时，它们会互相覆盖;他们不互相补充。