覆盖上下文选择器

Question

是否可以 revert/override 上下文选择器的属性？

.card {
  padding-top: 20px;
  ...
}

.card .card-header {
  padding: 0 20px;
}

.card .card-header.news {
  padding-top: 0px;
}

是否可以删除特殊元素的顶部填充。因为在生成的 HTML 中填充仍然存在，但我想继承所有其他样式。

http://jsfiddle.net/v1yxw5n5/27/

Answer 1

您可以使用负边距顶部作弊：

.card {
    border: solid 1px blue;
    padding-top: 20px;
}

.card .card-heading {
    border: solid 1px red;
    margin-top: -20px;
}

http://jsfiddle.net/aemgb75b/

Answer 2

如果我对你的理解是正确的，你想删除 'card' 的顶部填充，其中 child 和 class 'news'。但是css中没有parent选择器。但是你可以通过jquery来完成。 http://css-tricks.com/parent-selectors-in-css/

在你的情况下，你可以像这样删除填充，http://jsfiddle.net/v1yxw5n5/27/

<div class="card  news">
<div class="card-heading">
<h4>That is news</h4>
</div>
</div>



.card {
    padding-top: 20px;
    margin: 10px 0 20px 0;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-top-width: 0;
    border-bottom-width: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
   }
   .card .card-heading {
    padding: 0 20px;
    margin: 0
   }
   .card.news {
    padding-top: 0px;
   }

Answer 3

您可以使用 CSS 选择器 4 :has 来做到这一点。但目前缺乏支持

它看起来像这样：

.card:has(.card-heading.news) {
  padding-top: 0;
}

Answer 4

 .card .card-heading * {
    padding-top: 0px;
}

通过这种方式，您 select .card .card-heading

的所有子元素

覆盖上下文选择器

Overriding contextual selectors

css

inheritance

css-selectors