如何在css的子元素的帮助下删除父元素上的所有内联样式?

Question

我正在做一个angular项目，我想在子元素的帮助下删除父元素样式，因为子元素是基于条件的。注意父元素具有内联样式

我的代码是这样的

<form style="background-color: red; padding: 5px"
class="my-form">
<div>
<div>
<button class="my-btn">click me</button>
</div>
</div>

css

.my-btn {
color: #fff;
background-color: #000;
border: none;
outline: none;
padding: 5px 12px;
cursor: pointer;
}

Answer 1

虽然子元素不能直接影响父元素的样式，但你可以做一些事情，但这些想法是否有用取决于你想做什么。

以问题中给出的代码为例，可以通过在btn上放置一个伪元素来改变表单的背景颜色，该元素的绝对位置和大小相对于表单而不是btn。CSS变量可以在btn元素上设置，然后由它的pseudo元素拾取，例如背景颜色在这里。

.my-form {
position: relative;
display: inline-block;
z-index: -2;
}
.my-btn {
color: #fff;
background-color: #000;
border: none;
outline: none;
padding: 5px 12px;
cursor: pointer;
}
.my-btn::before {
content: '';
background-color: var(--bg);
display: inline-block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
}

<form style="background-color: red; padding: 5px" class="my-form">
<div>
<div>
<button class="my-btn" style="--bg: blue;">click me</button>
</div>
</div>