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

Question

下面＆＃39;例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

实际结果：

预期结果：

如何在<i>内禁用<u>下划线？

Answer 1

为什么要花费精力？

我的意思是：您使用<u>标记标记您的内容;现在你想要一个带下划线的特殊规则，但斜体文本只应该是 italic ，但不加下划线？！

我认为你最好退一步看看你的要求;简单的解决方案是：“切换到斜体时结束</u>部分。”

并且为了记录：正如TheYaXxE在他的回答中所表明的，这在技术上是可行的。但我在这里与Konrad在一起 - 可以完成的事实并不意味着应该以这种方式完成。

Answer 2

这并不是说你应该这样做。它是一种黑客和非语义（正如其他用户所提到的）。但是要使用你的HTML结构并回答你如何做到的问题，这就是答案：

＆＃13;

＆＃13;

u {
  display: inline-block;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

有几种方法可以达到你想要的效果。

最明显的方法就是让你和我紧挨着这样：

＆＃13;

＆＃13;

i {
  color: red;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你仍然希望将它们中的两个包裹起来，只需将它们包裹在一个范围内：

＆＃13;

＆＃13;

span i {
  color: red;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

  

最好为带下划线的部分使用单独的标记

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

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

Answer 5

试试这个。此外，您无法禁用<i> inside <u>的下划线。就像您试图说红色到黑色一样。谢谢！

 i {      
  color: red;  
  }

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

Answer 6

正如其他答案已经表明的那样，你不应该这样做。给出了各种各样的理由，我在这里不再重复，而且它们都是好的，所以不要这样做。只是不要。

尽管如此，有一个解决方案并不需要更改标记，只有css。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;