在CSS中样式化图片无效
[英]Styling image in CSS doesn't work
问题描述
Can someone please tell me what i'm doing wrong here, the css works when i replace the .1{} with img{} . 
有人可以告诉我我在做什么错，当我用img{}替换.1{}时，css起作用了。 Shouldn't I also be able to use img.1{} or .1 img{} 我不应该也可以使用img.1{}或.1 img{}
Here's the UPDATED HTML 这是更新的 HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clouds">
<img id="cheese" src="cloud.png">
</div>
</body>
</html>
And the UPDATED CSS 和更新的 CSS
body{
margin:0;
padding:0;
background:#0088ff;
font-family:helvetica;
}
#clouds{
overflow:hidden;
width:100vw;
height:100vh;
}
#cheese img{
display:none;
}
3 个解决方案
解决方案1
5 2015-07-30 06:40:57
Change the class name from 1 to something that starts with a letter and try again. 将类名从1更改为以字母开头的名称，然后重试。
EDIT: 编辑：
I see you have some problems with basic things. 我看到您在基本方面有一些问题。
If your image has an ID like <img id="foo" src="" /> then you reference in CSS using img#foo { } (tag + hash + identifier) or just using id without providing type of the tag: #foo { } . 如果图像等的ID <img id="foo" src="" />则在CSS使用参考img#foo { }标签+散列+标识符）或只用ID，而不提供标签的类型： #foo { } 。
解决方案2
1 2015-07-30 06:45:46
Numbers at the beginning of a class name are not illegal in the CSS grammar.
"The name can contain characters az, AZ, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit."
You are just specifying the name the wrong way. 您只是以错误的方式指定了名称。
See http://www.w3.org/TR/CSS21/grammar.html 参见http://www.w3.org/TR/CSS21/grammar.html
Try to this way according to updated your question 根据更新的问题尝试这种方式
img#cheese {
display:none;
}
or 要么
#clouds>img{
display:none;
}
解决方案3
0 2015-07-30 06:42:33
if you have multiple images then you can use like this:you can use like this: 如果您有多个图像，则可以这样使用：可以这样使用：
<style>
#clouds{
overflow:hidden;
width:100vw;
height:100vh;
}
.1{
display:none;
}
.2{
display:block;
}
</style>
<div id="clouds">
<img class="1" src="cloud.png">
<img class="2" src="cloud.png">
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.