我正在尝试在我的网页上显示代码片段。我是 CSS 新手，在创建用于显示我的代码片段的深色背景时遇到了问题。
当我创建一个名为“test”的类(它应该覆盖所有其他背景规范，对吗？)并为其分配蓝色颜色属性和黑色背景属性时，蓝色显示在预标记中，但背景保持默认颜色。
当我切换到 span 标签并在那里分配类时，两个属性都按照我的命令工作。但我不想使用跨度，因为我的导师说非语义标签是不好的做法。有些东西告诉我，我需要以某种方式覆盖 pre 标签的某些固有属性。
有什么想法吗？如果合适/需要，我可以在此处发布代码。
编辑:我在这里发布了代码的简化版本。我测试了它，并在这里遇到了同样的问题。希望使用更少的代码可以更容易地查明问题。
这是 HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
现在是 CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
最佳答案
规则越具体，覆盖父类或id的可能性就越大。试一试...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
关于html - 背景属性在 CSS 中表现异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33852380/