直通无法正常工作

Question

.slogan 类具有“text-decoration: line-through;”，但“span”具有“text-decoration: none;” 为什么不取消呢？

header {
  background: #34abf8;
  width: 100%;
  height: 500px;
}
.slogan {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 4.5em;
  text-decoration: line-through;
}
.slogan span {
  font-weight: 500;
  font-size: 0.45em;
  text-decoration: none;
}

<header>

  <div class="slogan">
  This text is underlined. <span>But this shouldn't be underlined</span>
  </div>

</header>

Answer 1

规范明确指出：

后代元素的“text-decoration”属性不能对祖先的装饰产生任何影响。

然而，文本装饰会传播到后代的内容，除非它们显示为原子内联级元素、浮动、定位absolute。

16.3.1 下划线、上划线、醒目和闪烁：'text-decoration'属性

[...] 请注意，文本装饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。

因此，您可以将displayspan 更改为，inline-block以防止<span>元素受到父级装饰的影响：

header {
  background: #34abf8;
  width: 100%;
  height: 500px;
}
.slogan {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 4.5em;
  text-decoration: line-through;
}
.slogan span {
  font-weight: 500;
  font-size: 0.45em;
  display: inline-block;
}

<header>

  <div class="slogan">
  This text is underlined. <span>But this shouldn't be underlined</span>
  </div>

</header>