Question

class .slogan有＆＃34; text-decoration：line-through;＆＃34;，但＆＃34; span＆＃34;有＆＃34; text-decoration：none;＆＃34;为什么不取消它？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

spec明确指出：

后代元素上的'text-decoration'属性不能有任何属性对祖先的装饰有影响。

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

<强> 16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property

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

因此，您可以将范围的display更改为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>

Answer 2

它不是文本节点的属性，而是具有.slogan的整个line-through元素。

例如，您可以在此处看到two两次带下划线，因为.slogan和span都带有下划线。

.slogan {
   text-decoration: underline;
   font-size: 20px;
}

.slogan span {
   font-size: 10px;
   text-decoration: underline;
}

<div class="slogan">
   one ... <span> two </span>
</div>

Answer 3

span有一个inline display，将display重置为除inline以外的任何内容，以便覆盖其上的text-decoration内容。

添加了<b>，让您看到内联元素的defaut行为。

＆＃13;

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;
  display:inline-block
}
b {padding:0.25em;}

＆＃13;

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

＆＃13;

直通不能正常工作

3 个答案: