主页 / 问题 / 1305747
Accepted
Frontender
Asked:2022-07-16 08:58:54 +0000 UTC2022-07-16 08:58:54 +0000 UTC

如何为不在 pre 标签内的代码标签设置样式？

  • 772

页面上有单独的标签code，标签code内也有标签pre。如何设置标签的样式code，使其仅适用于不在标签内的单个标签pre？

样式必须仅适用于<code>code text</code>

我这样做，但我不确定它是否正确： 

*:not(pre)>code {
  white-space: nowrap;
  padding: 2px 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #e9eaec;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
}
<pre>
    <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
    </code>
</pre>
<code>code text</code>

css

1 个回答

  1. Best Answer

    正确的选择是添加一个类：

    code.inline {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  background: #e9eaec;
}
    <pre>
  <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
  </code>
</pre>

<code class="inline">code text</code>

    但是，如果你想要“便宜又开朗”，那么像这样：

    code {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  background: #e9eaec;
}

pre code { all: unset; }
    <pre>
  <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
  </code>
</pre>

<code class="inline">code text</code>

    • 0

相关问题