覆盖子元素上的文本装饰

Question

我想覆盖子元素中的父 css。我想在父元素下划线，而不是在子元素下划线。

.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>

Answer 1

正如MDN中所述

文本装饰跨越后代元素。这意味着不可能在后代上禁用在其祖先之一上指定的文本装饰。

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

Answer 2

您可以通过在父元素文本中添加 span 来做到这一点，如下所示

超文本标记语言

<div class="parent"><span class="parent_text">Inside  parent</span>
            <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>

CSS

.parent span.parent_text{
    text-decoration:underline;
}