html - 覆盖子元素上的文本装饰

标签 html css

<分区>

我想覆盖子元素中的父 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>

最佳答案

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.

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

关于html - 覆盖子元素上的文本装饰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36131782/

相关文章:

javascript - 接下来使用 jquery 查找 "nested"sibling

css - Internet Explorer 向 flex box 添加了额外的填充。怎么修?

javascript - 光滑 slider 内的 Bootstrap 模式

jquery 动画 css 样式不起作用

css - 垂直顶部并排对齐 ul 元素

jquery - IE 7 中的 CSS 菜单中断

javascript - 如何检查是否在弹出窗口中单击了 (X) 按钮

html - Angular Material 表 : unbind checkbox click from row

Javascript - 当我在输入表单中按 Enter 键时代码正在运行

css - 是否可以在 LESS 中添加父选择器?