当元素具有特定类的子元素时，仅选择该元素。

Question

我有这段标记：

<div class="container page-content">

</div>

通常情况下，class为page-content的元素会有内边距：

.container.page-content{
    padding-top: 160px;
}

但是在我的div里面有一个名为“item-pagehome”的类的特定页面：

<div class="container page-content">
   <div class="item-pagehome">
     Some Content ... 
   </div>
</div>

在这种特殊情况下，我希望禁用.page-content的padding-top。但是我该如何做呢？

我尝试选择：

.page-content:has(> .item-pagehome){
   padding-top: 0px;
}

但这并不起作用...

我该如何只选择一个特定子类的div，比如.item-pagehome？

- goldlife

---

你想覆盖父级样式吗？ - user5306470

https://dev59.com/S3NA5IYBdhLWcg3wUL9Y - Nenad Vracar

@alexanderbird，方向错了。 - user5306470

@DaniSpringer 你是什么意思？ - alexanderbird

@DaniSpringer，我不确定这是正确的 - 父元素有填充，当父元素有某个子元素时，他想要移除父元素的填充。goldlife，这正确吗？ - alexanderbird

Answer 1

.container.page-content .item-pagehome {
    margin-top: -160px;
}

- Michael Benjamin

---

这可能在某些特定情况下有效，但请注意，子元素的负边距并不总是会对父元素产生相同的影响... 这是一种hacky解决方案，我不建议在真实项目中使用这种方法... - Narxx

有趣的答案...但在我的情况下不起作用。 - goldlife

@Narxx，这里有一个可能有用的方法，无论是在这种情况下还是其他情况下。 - Michael Benjamin

@Michael_B 这并不是一个真正的方法，对于这种情况使用负边距很少被证明是合理的，而且非常难以维护。它可能解决一些罕见的边缘情况（我现在想不到任何例子），但在一般情况下（如StackOverflow答案所努力解决的），这不是一种推荐的方法（在我个人看来）。 - Narxx

我明白你的意思，@Narxx。我们并不持有不同意见。这只是在转向脚本或重新构建HTML之前的最终CSS选项。还要记住：负边距存在是有原因的，通常是为了补偿另一个元素的框模型属性。 - Michael Benjamin

@Michael_B 我相信一定有适当的方法可以实现他的需求，而无需使用JS或负边距，但我们不知道他的具体需求。他的问题非常具体，实际上是无法完成的：“如何仅在其作为特定子类（在本例中为.item-pagehome）时选择div？” :) - Narxx

Answer 2

这不能通过CSS实现。

CSS是层叠样式表（cascading: 从上到下）。你只能影响CSS选择器中的最后一个元素。

你想要的条件可以使用JavaScript完成，但这超出了你问题的范围。

- Narxx

---

有没有通过CSS实现这个的方法？ - goldlife

FYI：我不認為CSS中的“cascading”部分就是那個意思。https://dev59.com/tHNA5IYBdhLWcg3wPLL- - alexanderbird

@ChrisW。如果您使用 p ~ p，那么它只会影响最后一个 <p> 元素。 - Narxx

@goldlife 答案是否定的。你不能做你想要的事情（我真希望你能），CSS就是不这样工作的。你可能可以以不同的方式设计你的页面，既满足你的需求，又不会破坏CSS。 - Narxx

啊，抱歉我一直在考虑覆盖的意义，必须实际动手才能将其体现为一个解决方法的示例，就像这个。 - Chris W.