css - 有没有办法在修改某些属性的同时从父级继承 CSS 属性？

Question

例如，具有多个输入的 CSS 属性:

这样的事情可能吗？

.button:active {
  background-color: rgba(inherit, inherit, inherit, 0.5);
}

是使用像 LESS 这样的脚本化 CSS 来做到这一点的唯一方法吗？

Answer 1

您可以通过稍微不同地处理问题来获得所给示例的答案。通过将背景颜色放在 z-index 为 -1 的伪元素上，使其位于内容的后面(给定 z-index 为 1)，然后仅更改不透明度......你已经实现了你想要上面没有任何 LESS。

请参阅此 fiddle :https://jsfiddle.net/3uopd059/

.button {
  padding:1em;
  position:relative;
  float:left;
  color:#000;
  z-index:1;
}
.button::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: grey;
  z-index:-1;
}
.button:active::after {
  opacity:0.5;
}

当然，如果您想单独更改每种颜色，则需要使用其他方法。