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>

带有下划线的早期代码看起来不错。带有左边框的blockquote看起来很棒。但是为什么内部代码仍带有下划线？ text-decoration:none;为什么不适用于它？如您所见，我试图在许多不同的地方添加它，但是顶级underline似乎仍然存在。我该怎么做对呢？

Answer 1

您可以使用>的{{1}}选择器来实现此目的，无需更改css或添加课程

从HTML移除text-decoration
使用div.addu选择器定位pre标签并为其赋予>
将text-decoration: underline添加到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;
}

Answer 2

您做对了，没有HTML解决方案，或者最快的解决方案就是在CSS中将这行display:inline-block添加到div.addu blockquote pre code规则，没有其他改变。

div.addu { color: #006e28; text-decoration: underline; }
div.addu blockquote pre { text-decoration: none; }
div.addu blockquote pre code { text-decoration: none; display:inline-block }
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>

由于text-decoration仅适用于inline-block元素，因此您可以这样做

删除文本修饰：带下划线的块内的pre标签的下划线

2 个答案: