jquery - jQuery或CSS选择器以删除特殊情况下的填充

我有一些动态生成的div，其id = myFavDiv和class = myFavdiv，在我的应用程序的许多屏幕之间共享。 myFavDiv（ID选择器）的CSS如下所示。

#myFavDiv {
margin: 0px 20px 0px 20px;
}

但是，我有一个id =“ salesTotal”的特定div，并且在其中我可以动态生成myFavDiv。但是，在这种特殊情况下，即当“ myFavDiv”出现在“ salesTotal” div内时，页边距会导致布局问题。

是否有CSS方式通过某种选择器来处理/将边距设置为0（对于“ myFavdiv”而言），该选择器会说类似“仅当'myFavDiv'与'salesTotal'一起出现时，将填充设置为零。另外，请注意，“ myFavDiv”不直接位于“ salesTotal”内部。

我也可以通过某种Jquery方式来操纵此CSS。

我无法更改上面的CSS，因为它会错误地影响应用程序中的许多其他位置。

请指教，谢谢。

最佳答案

您只需添加带有后代选择器的第二条规则：

#salesTotal #myFavDiv {
    margin: 0;
}

另外，还有一个好处：您可以将现有代码替换为：

#myFavDiv {
    margin: 0 20px;
}

您不需要在0值后的px，并且如果您具有相同的顶部/底部和左侧/右侧，则可以删去第二组值（因此，0 20px实际上最终会被浏览器为0 20px 0 20px）。

为了清楚起见，您的最终代码应为：

#myFavDiv {
    margin: 0 20px;
}

#salesTotal #myFavDiv {
    margin: 0;
}