覆盖子元素上的文本装饰 [英] Override text-decoration on child element

问题描述

我想覆盖子元素中的父CSS。
我想为父元素添加下划线，但不是子元素。

I want to override the parent css in child element. I want to underline the parent element, but not the child element.

.parent {
  text-decoration: underline;
  color: red;
}
.child {
  color: green;
  text-decoration: none !important;
}
.sub-child {
  color: green;
  text-decoration: none !important;
}

<div class="parent">Inside parent
  <div class="child">Inside first child
    <div class="sub-child">Inside 1st child of 1st child
    </div>
  </div>
  <div class="child">Inside 2nd child
    <div class="sub-child">Inside 1st child of 2nd child</div>
    <div class="sub-child">Inside 2nd child of 2nd child</div>
  </div>
  <div class="child">
    Inside 3rd child
    <div class="sub-child">Insde 1st child of 3rd child</div>
  </div>
</div>

推荐答案

如 MDN 中所述

As stated in MDN

文本装饰在子元素之间绘制。这意味着
不能在子孙上禁用在其祖先之一上指定的
的文本修饰。

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

所以，不幸的是，你不能。唯一的解决方案是，正如其他人在这里说，用相应的文本包装一个标签。 a span

So, unfortunately, you can't. The only solution is, as others stated here, to wrap the corresponding text with a tag e.g. a span

这篇关于覆盖子元素上的文本装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！