Question

是否可以从上下文选择器恢复/覆盖属性？

.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

如果我理解正确你想要删除带有“新闻”类的孩子的“卡片”的顶部填充。但是css中没有父选择器。但你可以通过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

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

以这种方式选择.card .card-heading

的所有子元素

Answer 4

您可以使用CSS选择器4 :has执行此操作。但目前缺乏支持

看起来像这样：

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

覆盖上下文选择器

4 个答案: