CSS类被调用但不起作用
[英]CSS classes being called but not having effect
问题描述
I currently have the following code: 
我目前有以下代码：
<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>
But the classes aren't having any effect at all. 但是这些类根本没有任何作用。 It remains this way even if I call an external stylesheet. 即使我调用外部样式表，它仍然保持这种方式。 But , if I do <span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px"> then it works. 但是 ，如果我执行<span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px">那么它将起作用。 Can anyone help me with this? 谁能帮我这个？
4 个解决方案
解决方案1
3 2015-04-14 20:11:34
you need to take away the quotes around the hex codes. 您需要删除十六进制代码周围的引号。 and change background to background-color (EDIT: I guess technically you don't need to it's more of a preference really) 并将background更改为background-color （编辑：我想从技术上讲，您实际上并不需要更多的偏好）
fiddle here: http://jsfiddle.net/zy8yq6rj/ 在这里提琴： http : //jsfiddle.net/zy8yq6rj/
解决方案2
2 已采纳
You need remove the quotes in your css. 您需要删除CSS中的引号。
.gr {
color: #ffffff;
background: #00ff00;
border-radius: 8px 0 0 15px;
}
.or {
color: #00ff00;
background: #ffa500;
border-radius: 0 15px 8px 0;
}
Working jsfiddle here http://jsfiddle.net/u36k17v6/1/ 在这里工作jsfiddle http://jsfiddle.net/u36k17v6/1/
解决方案3
0 2015-04-14 20:13:45
It seems you have another CSS file that is overriding your config. 看来您还有另一个CSS文件正在覆盖您的配置。
When you make a style="" inside a DOM object, it is the most important rule to follow. 当您在DOM对象中创建style =“”时，这是要遵循的最重要的规则。 There you have a little explanation about that things. 在那里，您对此有一些解释。
Then add to your CSS code !important to make them the first to check: 然后添加到您的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>
You can check the rules applying to the DOM object, for example in chrome, clickng second button on mouse over the desired object to check, and choose Inspect Element. 您可以检查适用于DOM对象的规则（例如，在chrome中），在要检查的对象上单击鼠标第二个按钮，然后选择“检查元素”。 On the Styles panel you´ll be able to see the rules aplying to this object, and the file they are coming from. 在“样式”面板上，您将能够看到该对象适用的规则以及它们来自的文件。
Hope it helps!! 希望能帮助到你！！ Regards! 问候！
EDIT 编辑
I did´nt realize about the "" in the color and background !! 我没有意识到颜色和背景中的“”！ Sorry!! 抱歉！！ Anyways I´m living the answer here. 无论如何，我在这里找到答案。 Thanks a lot to @deebs for the semicolon must go after the !important advice. 非常感谢@deebs， 分号必须遵循！重要的建议。 will check better next time!! 下次会检查的更好！！
解决方案4
-1 2015-04-14 20:40:28
When specifying a color in CSS, you need to use the background-color tag. 在CSS中指定颜色时，您需要使用background-color标签。 Also, you don't need to add quotations when specifying a HEX code. 另外，在指定十六进制代码时，无需添加引号。
So, your code should be: 因此，您的代码应为：
<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>
Welcome to the world of CSS! 欢迎来到CSS世界！
Here's some light reading for you: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color 这是给您的一些轻松阅读材料： https : //developer.mozilla.org/en-US/docs/Web/CSS/background-color
Also, as a go-to reference for all things CSS, I go to the MDN: https://developer.mozilla.org/en-US/ 另外，作为所有CSS的参考，我转到MDN： https ： //developer.mozilla.org/en-US/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.