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; 不适用于它？正如您所看到的，我尝试在许多不同的地方添加它，但顶级下划线似乎仍然存在。我该如何正确地做到这一点？

Answer 1

您可以使用 css 的 > 选择器来实现此目的， 无需更改 HTML 或添加类

• 从 div.adu 中删除 text-decoration
• 使用 > 选择器定位 pre 标记，并为其赋予 text-decoration: underline
• 将 text-decoration: underline; 添加到 p 标签

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>