html - 去除文字装饰 :underline of pre tag inside of underlined block

Question

这是一个复制的例子:

div.addu { color: #006e28; text-decoration: underline; }
div.addu blockquote pre { text-decoration: none; }
div.addu blockquote pre code { text-decoration: none; }
div.addu pre, div.rm pre, div.add pre { background-color: #f6f8fa; }
div.addu > blockquote {
border-left: 4px solid #00a000;
padding: 0 15px;
color: #006e28;
text-decoration: none;
}

<div class="addu">
<pre><code>Underline this code</code></pre>
<p><em>Effects</em>: Equivalent to:</p>
<blockquote>
<pre><code>Do not
Underline
This code</code></pre>
</blockquote>
</div>

早期带下划线的代码看起来很棒。带有左边框的 block 引用看起来很棒。但是为什么里面的代码还是有下划线的呢？为什么 text-decoration:none; 不适用于它？如您所见，我尝试在许多不同的地方添加它，但顶级 underline 似乎仍然存在。我该如何正确执行此操作？

Answer 1

您可以使用 选择器 css 来实现这一点，无需更改 HTML 或添加类

• 从 div.addu 中移除 text-decoration
• 使用选择器定位pre标签，并给它text-decoration: underline
• 在p标签中添加text-decoration: underline;

div.addu { color: #006e28; }
div.addu p { text-decoration: underline; }
div.addu > pre { text-decoration: underline; }
div.addu blockquote pre { text-decoration: none; }
div.addu blockquote pre code { text-decoration: none; }
div.addu pre, div.rm pre, div.add pre { background-color: #f6f8fa; }
div.addu > blockquote {
border-left: 4px solid #00a000;
padding: 0 15px;
color: #006e28;
text-decoration: none;
}

 <div class="addu">
  <pre>
   <code>strong_ordering operator&lt;=&gt;(const error_code&amp; lhs, const error_code&amp; rhs) noexcept;</code>
  </pre>
  <p>
   <span class="marginalizedparent"><a class="marginalized">8</a></span>
   <em>Effects</em>: Equivalent to:
  </p>
  <blockquote>
   <pre>
 <code>if (auto c = lhs.category() &lt;=&gt; rhs.category(); c != 0) return c;
			return lhs.value() &lt;=&gt; rhs.value();</code>
   </pre>
  </blockquote>
  <pre>
   <code>strong_ordering operator&lt;=&gt;(const error_condition&amp; lhs, const error_condition&amp; rhs) noexcept;</code>
  </pre>
  <p>
   <span class="marginalizedparent"><a class="marginalized">9</a></span>
   <em>Effects</em>: Equivalent to:
  </p>
  <blockquote>
   <pre>
    <code>if (auto c = lhs.category() &lt;=&gt; rhs.category(); c != 0) return c;
			return lhs.value() &lt;=&gt; rhs.value();</code>
   </pre>
  </blockquote>
</div>