Question

我的html代码如下：

<code>concat</code>
<pre class="sourceCode haskell">
    <code class="sourceCode haskell">concat</code>
    <code> something else </code>
    some more
</pre>

生成此代码，因此无法更改它。

我希望以与<code>标记相同的方式（带边框）来标注pre标记，但是当我将<code>置于其中时，我不想要多个边框<pre>代码。

基本上我的问题是：有没有办法设计样式code，只有它不在<pre>标签中。

这可能吗？如果是这样，怎么样？

Answer 1

样式代码，然后是样式代码，它是前置不同的后代。

code { border: foo; }
pre code { border: none; }

Answer 2

您需要为code指定一组样式，为pre code指定一套样式。

举个例子：

code {
  border: 1px solid black;
}
pre {
  border: 1px solid blue;
}
pre code {
  border: 0;
}

<code>
  test
</code>

<pre>
  <code>
    Test code in pre
  </code>
</pre>

Answer 3

所以你想......

pre,
code{
  border: 1px solid red;
}
pre code{
  border: 0;
}

...以便两者的样式相同，除非<code>嵌套在<pre>内

Css一个标签，但不是另一个

3 个答案: