Question

我目前有以下代码：

<html>
<head>
<style>
.gr {
    color: "#ffffff";
    background: "#00ff00";
    border-radius: 8px 0 0 15px;
}

.or {
    color: "#00ff00";
    background: "#ffa500";
    border-radius: 0 15px 8px 0;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

但这些课程根本没有任何影响。即使我调用外部样式表，它仍然是这样。但是，如果我做<span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px">那么它就可以了。任何人都可以帮我这个吗？

Answer 1

你需要取消十六进制代码周围的引号。并将background更改为background-color（编辑：我觉得从技术上讲，你并不需要它更多的是一种偏好）

在这里小提琴： http://jsfiddle.net/zy8yq6rj/

Answer 2

您需要删除css中的引号。

.gr {
    color: #ffffff;
    background: #00ff00;
    border-radius: 8px 0 0 15px;
}

.or {
    color: #00ff00;
    background: #ffa500;
    border-radius: 0 15px 8px 0;
}

在这里工作jsfiddle http://jsfiddle.net/u36k17v6/1/

Answer 3

您似乎有另一个CSS文件覆盖了您的配置。

当你在DOM对象中创建一个style =“”时，它是最重要的规则。 There你对这些事情有一点解释。

然后添加到您的CSS代码！重要的是让他们成为第一个检查：

<html>
<head>
<style>
.gr {
    color: #ffffff !important;
    background: #00ff00 !important;
    border-radius: 8px 0 0 15px !important;
}

.or {
    color: #00ff00 !important;
    background: #ffa500 !important;
    border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

您可以检查应用于DOM对象的规则，例如在chrome中，鼠标左键单击要检查的所需对象上的第二个按钮，然后选择Inspect Element。在样式面板上，您将能够看到应用于此对象的规则及其来自的文件。

希望它有所帮助!! 此致！

修改

我没有意识到颜色和背景中的“”！抱歉！！无论如何我在这里生活的答案。非常感谢@deebs的分号必须遵循！important 建议。下次会更好地检查!!

Answer 4

在CSS中指定颜色时，您需要使用background-color标记。另外，在指定HEX代码时，您不需要添加引号。

所以，你的代码应该是：

<html>
<head>
<style>
.gr {
    color: #ffffff; !important
    background-color: #00ff00; !important
    border-radius: 8px 0 0 15px; !important
}

.or {
    color: #00ff00; !important
    background-color: #ffa500; !important 
    border-radius: 0 15px 8px 0; !important
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

欢迎来到CSS的世界！

这里有一些轻松的阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

此外，作为所有CSS的首选参考，我转到MDN： https://developer.mozilla.org/en-US/

调用CSS类但没有效果

4 个答案: