Text-decoration-line: none对儿童无效

Question

有人知道为什么span文本仍然加下划线，尽管我指定不加下划线。span子元素的颜色会被覆盖，但text-decoration-line不会?

p {
width: 300px;
text-decoration-line: underline;
color: #333;
}
span {
text-decoration-line: none;
color: #F00;
display: inline-block;
}
#span2 {
display: inline;
}

<p>Lorem ipsum <span id="span1">THIS IS NOT UNDERLINED and should sit next to "Lorem ipsum", not below it</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>
<p>Lorem ipsum <span id="span2">THIS IS NOT UNDERLINED and should sit next to "Lorem ipsum", not below it</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>

Answer 1

尝试将display: inline-block添加到span中。它带下划线是因为它是带下划线的p标签的子标签。这是最简单的方法。

祝你编程愉快:)

p {
text-decoration: underline;
color: #333;
}
span {
display: inline-block;
color: #F00;
}

<p>Lorem ipsum <span>THIS SHOULD NOT BE UNDERLINED</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>

Answer 2

这是因为您为p添加了下划线，并且它适用于整个句子。您可以像这样添加代码，而不需要css属性。

<u><p>Lorem ipsum</u> <span>THIS SHOULD NOT BE UNDERLINED</span> <u>sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</u></p>