Question

是否可以通过这种方式定义样式？此示例中的类 child 是红色的，除非它包含在 parent 类中，我希望它重置，以便它采用style属性中定义的颜色父母。

.child {
 color: red;
}

.parent > .child {
 color: _clear_;
}

<div class="parent" style="color:blue;">
 <div class="child">Some Text</div>
</div>

Answer 1

我认为color: inherit; .parent > .child正是您所寻找的：

＆＃13;

.child {
    color: red;
}

.parent > .child {
    color: inherit;
}

＆＃13;

<div class="parent" style="color:blue;">
    <div class="child">This will be blue</div>
</div>

<br/>

<div class="child">This will still be red</div>

＆＃13;

JSFiddle示例

Answer 2

如果您使用的是有效选择器，例如您的示例，则需要使用inherit：

.child {
 color: red;
}

.parent > .child {
 color: inherit;
}

但是，如果你正在寻找更复杂的东西，例如＆＃34;根据父母没有特定属性＆＃34;来设置孩子的风格，那么纯CSS可能无法实现。此外，某些子元素可能无法从父级逻辑继承样式，因此请务必设置＆＃34; parent＆＃34;孩子可以继承的父母的样式规则，以及你对规则的想法（所以你没有为那个场景设定那种颜色的链条那么高）。例如，在上面的示例中，如果父级没有内联样式规则，则不存在color规则，因此子级将从更高的位置获取值。

重置css样式颜色属性

2 个答案: