如何禁用 标签内 标签的下划线？

Question

示例如下：

u i {
  text-decoration: none;
  color: red;  
}

<u>
  Underlined text
  <i>Text without underline</i>
</u>

实际结果：

预期结果：

我应该怎么做才能在  中禁用  的下划线？

Answer 1

为什么要花精力去尝试？

我的意思是：您使用  标签 标记了 您的内容；现在你想有一个特殊的规则，带下划线但 italic 文本应该只 italic，但不带下划线？！

我认为你最好退后一步，看看你的要求；因为简单的解决方案是："end the  section when switching to italic".

郑重声明：正如 TheYaXxE 在他的回答中所展示的那样，这在技术上是可行的。但我同意 Konrad 的观点——可以完成某些事情并不意味着应该以这种方式完成。

Answer 2

which is best to use a separate tag for underlined part

i {
  text-decoration: none;
  color: red;  
}
span{
  text-decoration:underline;
  }

<div>
  <span>Underlined text</span>
  <i>Text without underline</i>
</div>

Answer 3

试试这个。此外，您不能禁用  inside  的下划线。这就像您试图将红色变成黑色一样。谢谢！

 i {      
  color: red;  
  }

<u> Underlined text </u>
  <i>Text without underline</i>

Answer 4

有几种方法可以达到您的要求。

最明显的方法就是让 u 和 i 像这样紧挨着：

i {
  color: red;  
}

<u>Underlined text</u>
<i>Text without underline</i>

如果你还想将它们两个包裹起来，只需将它们包裹在一个跨度内即可：

span i {
  color: red;  
}

<span>
  <u>Underlined text</u>
  <i>Text without underline</i>
</span>

Answer 5

这并不是建议您这样做。这是一个 hack 和 non-semantic（正如其他用户所提到的）。但是要使用您的 HTML 结构并回答有关如何做的问题，答案如下：

u {
  display: inline-block;
}

u i {
  float: right;
  padding-left: 5px;
  color: red;
}

<u>
  Underlined text
  <i>Text without underline</i>
</u>

Answer 6

正如其他答案已经指出的那样，您不应该这样做。各种理由都有，这里就不多说了，都是好理由，干脆不要了。只是不要。

也就是说，有一个解决方案不需要更改标记，只需要 css。

u i {
  text-decoration: underline;
  text-decoration-color:white;
  color: red;  
}

<u>
  Underlined text
  <i>Text without underline</i>
</u>

如何禁用 <u> 标签内 <i> 标签的下划线？