3

我想知道是否有一种方法可以使用 css 以某种方式设置包装器的样式，前提是它有一个内部带有特定 id 的 div。假设我有

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

在整个网站的几个地方，但只有在它的情况下才想更改填充

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

#slider里面有。问题是我想让它在#slider嵌套时具有更少的填充，所以如果#slider不切断所有奇怪的内容，我就不能真正弄乱边距。我尝试使用负边距，但它最终以一种奇怪的方式切断了我拥有的图像。

我知道你可以使用p + p后面有段落的段落之类的东西，所以我假设可能有一种方法可以做我想做的事情。提前致谢。

4

2 回答 2

4

此时，您不能使用任何 CSS 规则作为反向组合器来根据子级在父级上应用样式。相反，您可以通过向孩子添加边距来破解它。

div.intro_wrapper > #slider
{
  margin:20px;
}
于 2013-06-05T22:05:46.630 回答
1

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

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

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

然后在你的 CSS 中：

.padded_intro_wrapper
{
  padding: 20px;
}

同样，如果#sliderdiv 并不总是在.intro_wrapperdiv 内，你可以这样做：

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

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

编辑： 如果您感到懒惰，请拨弄

于 2013-06-05T22:21:13.367 回答