Question

我想在我的文档中使用通常的“灰色背景上的等宽”渲染代码元素。 HTML文档是从Markdown呈现的，可以有三种类型：

This is the markdown version with some `inline code`. The block code can be either like this

```
for i in world:
    say(i)
```

or the SO way like that

    for i in world:
        say(i)

back to normal text

这将呈现给

code {
  font-family: 'Ubuntu Mono', monospace;
  background: lightgray;
}

pre {
  background: lightgray;
  padding-left: 30px;
}

<p>This is the markdown version with some <code>inline code</code>. The block code can be either like this</p>

<pre>
<code>for i in world:
    say(i)
</code>
</pre>
<p>or the SO way like that</p>

<pre>
<code>for i in world:
    say(i)
</code>
</pre>

<p>back to normal text</p>

我想知道的部分是CSS。它现在工作正常，但我觉得这不是解决

事实的正确（推荐）方法

<code>可以是内嵌的，也可以是一个块，因此我应该相信background选项
如果我在background中遗漏pre，我最终会得到明显的灰线，每行代码一行。

这可能是最让我困扰的重复，但这可能是非常好的，这是正确的方法。我正在学习SASS，所以无论是这个还是CSS推荐对我都没问题。

Answer 1

合并CSS中的两个标签：

pre, code {
  background: lightgray;
}

但我想你已经知道了。解决重复问题。

Answer 2

尝试如下，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="Kuchen">
    <img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle();" />
</div>

如何在SASS（或纯CSS）中合并两个标签？

2 个答案: