Question

我有以下代码结构： -

<li class="container">
  <div class="wrap">
    <div class="green">...</div>
  </div>
</li>


<li class="container">
  <div class="wrap">
    <div class="xyz">...</div>
  </div>
</li>


..
.. so on

现在li有以下css： -

margin-top:35px

我不想继承包含绿色类的li的上述边距，但我希望它适用于 xyz 类。

我尝试在css中使用运算符＆gt; ，但它不起作用。

Answer 1

您可以使用:has() jQuery伪选择器：

$('.container:has(.xyz)').css(...);

Answer 2

如果您不希望margin-top:35px被应用（从父li继承）到div.green，那么这就是解决方案

<强> CSS

.green {
  margin-top:-35px;
}

<强> HTML

<li class="container">
  <div class="wrap">
    <div class="green">...</div>
  </div>
</li>


<li class="container">
  <div class="wrap">
    <div class="xyz">...</div>
  </div>
</li>

Answer 3

使用此代码结构，假设父容器：

<ul>
    <li class="container">
      <div class="wrap">
        <div class="green">...</div>
      </div>
    </li>
    <li class="container">
      <div class="wrap">
        <div class="xyz">...</div>
      </div>
    </li>
</ul>

你可以这样做：

ul li:nth-child(2) {
   margin: 0;
}

https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

但是规则是＆＃34;如果我在一个带有xyz类的div里面那么......＆＃34;我认为纯粹的css是不可能的。

我希望它有所帮助。

Answer 4

css中没有父选择器，但您可以使用javascript：

$('.xyz').closest('.container').css('margin-top', '35px');

从子元素覆盖祖父母的css

4 个答案: