wordpress 如何分别为代码块和内联设置不同的CSS颜色？

qoefvg9y 于 2022-11-22 发布在 WordPress

关注(0)|答案(1)|浏览(123)

我在WordPress写，并希望设置不同的颜色代码块与内联代码。
目前我正在使用这个片段，但这将同时改变我的代码块和内联代码样式。

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #097969;
    border-right: 3px solid #097969;
    border-top: 3px solid #097969;
    border-bottom: 3px solid #097969;
    border-radius: 10px;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

更具体地说，我希望inline code的颜色设置不同于：

code block

wordpress

来源：https://stackoverflow.com/questions/74384927/how-to-set-different-css-colors-for-code-block-and-inline-respectively

1条答案

按热度按时间

cwtwac6a1#

我不太明白你想干什么。
然而，如果你使用CSS属性选择器，你可以设置你想要的颜色。注意，你需要设置样式。显示与行HTML虽然。你不能设置它在CSS使用属性选择器时，如果你想选择它作为一个属性值的属性样式。见下面的代码。
CSS

<style>
pre[style*="display: block"] {
  background-color: pink;
}
pre[style*="display: inline"] {
  background-color: wheat;
}
pre {
  border: 3px solid #097969;
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}
</style>

HTML语言

<body>
<pre style="display: inline">
An inline code block.
</pre>
<pre style="display: block">
A block code block.
</pre>
<pre style="display: inline">
Another inline code block.
</pre>
<pre style="display: block">
Another block code block.
</pre>
</body>

赞(0）回复(0）举报 2022-11-22

我来回答

wordpress 如何分别为代码块和内联设置不同的CSS颜色？

1条答案

相关问题

热门标签

最新问答