Question

我有一个CSS，我想把所有规则都放在css相对于id。

例如：我有

.clearfix {
    clear: both;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
}

我必须像

一样

#vn_space .clearfix {
    clear: both;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
}

是否有任何简单的方法可以将所有css规则相对于一个id而不是编辑每个规则

Answer 1

您可以将继承用于第二条规则。

E.g。 clear: both中的.clearfix将适用于规则#vn_space .clearfix。因此，在#vn_space .clearfix中，您可以省略规则.clearfix中相同的任何内容。

＆＃13;

.clearfix {
  background-color: red;
  width: 20px;
  height: 20px;
}
#vm_space {
  padding: 5px;
  background-color: green;
}
#vm_space .clearfix {
  border: 1px solid black;
}

＆＃13;

<div class="clearfix"></div>
<div id="vm_space">
  <div class="clearfix"></div>
</div>

＆＃13;

Answer 2

如果您想这样做，那么您可以像

那样使用它

＆＃13;

$('div').css(["#vn_space", ".clearfix"]);

＆＃13;

但我不建议你更喜欢用其他方式做这个css

这里是我找到的参考链接

<强> Is it possible to reference one CSS rule within another?

编辑相对于一个id的所有CSS规则

2 个答案: