Question

我想知道是否有一种方法可以使用css以某种方式设置包装器，如果它有一个具有特定id的div。 让我们说我有

<div class="intro_wrapper"></div>

在整个网站的几个地方但只想改变填充

<div class="intro_wrapper">
    <div id="slider"></div>
</div>

里面有#slider。问题是，当#slider嵌套在其中时，我希望减少填充量，这样我就不会在#slider的情况下弄乱，而不会切断内容。我尝试使用负边距，但它最终以一种奇怪的方式切断了我的图像。

我知道你可以使用像p + p之类的东西作为跟随它们的段落的段落，所以我假设可能有办法做我喜欢的事情。提前谢谢。

Answer 1

此时，您无法使用任何CSS规则作为反向组合器，根据子项在父级上应用样式。相反，你可以通过为孩子添加一个保证金来破解它。

div.intro_wrapper > #slider
{
  margin:20px;
}

Answer 2

虽然我认为PSL的答案已经相当不错（跨浏览器，简单等）但如果您确实需要使用父选择器，则无效。虽然目前最好在可能的情况下避免这种情况，但肯定有些情况可能需要父选择器（或某些替代方案）。

如果你绝对必须使用父选择器，那么一个解决方案就是jquery，它的选择器引擎会识别:parent选择器，例如你可以这样做：

$("#slider:parent").addClass('padded_intro_wrapper');

然后在你的CSS中：

.padded_intro_wrapper
{
  padding: 20px;
}

同样，如果#slider div并非始终位于.intro_wrapper div内，您可以这样做：

$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');

这就是它开始变得有点混乱的地方。

编辑： Fiddle if you're feeling lazy