为什么我的CSS不会更改我的div？

Question

I am making a simple website and the writing I did in html in my div is showing up but the CSS is not effecting it.(ex. no colored box is showing up.) 我正在制作一个简单的网站，但我在div中用html编写的文字正在显示，但是CSS却没有影响它。（例如，没有显示彩色框。）

this is the html 这是HTML

<div id=“hello”>hello</div>

this is the css 这是CSS

#hello {
background:#ccc;
width:200px;
height:200px;
}

this is the full code 这是完整的代码

    <!DOCTYPE html>
<html>
<head>
<title>Title</title>
     <meta charset="UTF-8">
     <title>Website</title>
  <meta name="author" content="WebDev">
     <link href="example.css" rel="stylesheet" type="text/css" />
  <style>

  html { 
 font-family: "Open Sans";
    font-size: 24px;
    font-style: light;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}
}
body { 
 background:#Fff; margin:0 ;
}
#container { 
 width:1300px; 
 margin:0 auto; 
 background:#iff; 
}

#header { 
 width:100%; 
 height:170px; 
 background:#Fff;
 }

#logo { 
 float:left; 
 width:400px; 
 height:40px; 
 margin:30px; 
 background:#Fff;
 color: #000;
 font-size: 40px;
 line-height:38px; 
}
span1 { font-size: 30px;
        line-height: 18px;


}
#navbar { 
 height:40px; 
 clear:both; 
 background: #Fff;
}
#navbar ul { 
 margin:10px; 
 padding:1px; 
 list-style-type:none;
 line-height: 40px; 
}
#navbar ul li { 
 padding:px; 
 float:right ; 
 margin-top:20px;
}
#navbar ul li a { 
 font-size:24px; 
 float:right ; 
 float:right ;
 padding:0 0 0 20px; 
 display:block;
 text-decoration:none;
 font-weight:100;
 color:#000;
}


#banner { 
 background-image: url(pics/babypic.png);
 background-repeat: no-repeat;
 background-size:100%;
 height:445px; 
 padding:20px;
 clear: both;
}


#left_col { 
 float:left; 
 width:819px; 
 padding:20px; 
 height:600px; 
 color:#000; 
 background:#F0F8FF;
 font-size:20px;
}
h1 {
 font-size:35px;
 text-align:center;
 font-weight:300;
 margin-top:50px;
}
p {
 font-size:25px;
 font-weight: 200;
 margin-right:75px;
 margin-left:90px;
 line-height:40px;
 margin-top:50px;
}


#right_col { 
 float:right; 
 width:400px; 
 height:600px;  
 color:#000; 
 background:#F0F8FF; 
 padding:20px; 
}
h2 {
 font-size:35px;
 text-align:right;
 font-weight:400;
 margin-right:75px;
}
h3 {
 font-size:25px;
 font-weight: 200;
 margin-right:70px;
 margin-left:50px;
 line-height:40px;
 margin-top:30px;
 text-align:right;
}
#hello {
   height: 200px;
   width: 200px;
   background-color:#ccc;
}
#footer { 
 height:450px;
 background:#F0F8FF;
 float:bottom;
 clear:both;
 font-weight:100;
 font-size:25px;
} 
h5 {
 font-weight:100;
 font-size:25px;
 margin-left:250px;
 margin-right:250px;
 line-height:40px;
}
#footer ul1 {
 margin-left:400px;
 list-style:none;
 width:40%;
 display:block;
}


h4 {
 text-align:center;
 margin: 70px;
 font-weight:;
}

#end {
 height:200px;
}

  </style>
</head>
<body>
<!-- container -->
 <div id="container">
 <!--  header -->
 <div id="header">
  <div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
  <div id="navbar">
   <ul>
    <li><a href="#">contact </a></li>
    <li><a href="#">gallery &nbsp;|</a></li>
    <li><a href="#">fees & insurance &nbsp;|</a></li>
   <li><a href="#">hours & location&nbsp; |</a></li>
    <li><a href="#">services &nbsp;|</a></li>
    <li><a href="#">about &nbsp; |</a></li>
   </ul>
   </div>
  </div>
  <!-- content area -->
  <div id="content_area">
   <div id="banner"></div>
   <div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
   <div id="right_col">
<h2>
Call Us Today!   
</h2>
<h3>
set up an appointment 
<p2>  1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
  </div>
 <!-- blurb area -->
 <!-- footer -->
  <div id="footer">

<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002. 
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
 <div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today 
1-805-563-0167 
</p>
</h4>
</div>
 </div><!-- end container -->
</body>
</html>

Answer 1

There's just a little error in your div: If you look closely at the quotes around "hello" and the other quotes in your HTML file, they're not the same kind of quotes! 您的div中只有一个小错误：如果您仔细查看“ hello”周围的引号和HTML文件中的其他引号，它们就不是同一类引号！

In the Firefox debugging tools (image) , you can see that this causes the browser to interpret the class of the div incorrectly. 在Firefox调试工具（图片）中，您可以看到这会导致浏览器错误地解释div的类。

<div id=“hello”>hello</div>

vs 与

<div id="hello">hello</div>

Here's what your HTML looks like when it's fixed! 修复后的HTML外观如下所示！ (Just make the quotes different) （只是使引号不同）

final_image final_image

(Disclaimer: I just signed up on the site so my reputation isn't high enough to create in-post images :P, sorry about that) （免责声明：我只是在网站上注册，所以我的声誉还不足以创建后期图片：P，对此感到抱歉）

Answer 2

The double quotes you are using around the "hello" are different than everywhere else in the HTML. 您在“ hello”周围使用的双引号与HTML中的其他所有地方都不同。

If you re-type those double quotes it'll work. 如果您重新输入那些双引号，它将起作用。

Here is how the quotes look like to the browser. 这是浏览器中引号的样子。 1) Shows how "hello" shows up in a code editor but 2) and 3) show what the browser sees. 1）显示“ hello”如何在代码编辑器中显示，但2）和3）显示浏览器看到的内容。 Notice the extra pair of "? Tricky! 注意额外的一对“？Tricky！

DEMO of the problem 问题的演示

 #hello { height: 200px; width: 200px; background-color: #ccc; }

 <h3>BAD HELLO</h3> <div id=“hello”>hello</div> <h3>GOOD HELLO</h3> <div id="hello">hello</div>

Answer 3

try to give it width and height.. 尝试给它宽度和高度。

    div {
    height: 200px;
    width: 200px;
    background-color:blue;
}

Answer 4

Make sure to link the HTML file to the CSS file. 确保将HTML文件链接到CSS文件。 You do that by adding a link tag to the top of the HTML file, like this: 您可以通过在HTML文件的顶部添加一个link标记来做到这一点，如下所示：

<link type="text/css" rel="stylesheet" href="style.css" />

Where style.css is, you should write the path to your CSS file. 如果是style.css ，则应将路径写入CSS文件。

为什么我的CSS不会更改我的div？

问题描述

4 个解决方案

解决方案1
4 2017-07-25 01:48:43

解决方案2
1 已采纳 2017-07-25 01:59:27

解决方案3
0 2017-07-25 01:10:05

解决方案4
0 2017-07-25 01:31:13

为什么我的CSS不会更改我的div？

问题描述

4 个解决方案

解决方案1 4 2017-07-25 01:48:43

解决方案2 1 已采纳 2017-07-25 01:59:27

解决方案3 0 2017-07-25 01:10:05

解决方案4 0 2017-07-25 01:31:13

解决方案1
4 2017-07-25 01:48:43

解决方案2
1 已采纳 2017-07-25 01:59:27

解决方案3
0 2017-07-25 01:10:05

解决方案4
0 2017-07-25 01:31:13