div css过时了没有,div没有显示相应的CSS样式

我不明白为什么下面的div不会出现在页面中，我已经在style.css中给出了它的样式。该标题出现就好了，问题是在div与id="navigate"div没有显示相应的CSS样式

Hello

其中考虑到我使用我希望它是宽度100％的CSS，拥有200像素的高度和红色的背景，但只会出现“Hello”一词。

#navigate {

height: 200px;

width: 100%;

background-color:red;

}

我张贴整个代码的情况下，它提供了一个线索

的index.php

Elite Properties

placeholder="Search" />

tel: 123456789

fax: +090 44 12943

email: [email protected]

Register

Sign in

Hello

Test site, Copyright © 2017

的style.css

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

/*vertical-align: baseline;*/

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/* ~~~~~~~~ Global ~~~~~~~~ */

.container{ /*class*/

background:#35424a;

width:70%; /*In order to be responsive we will use percentage*/

height:50px;

margin:auto; /*This will move it to the middle wow wow wow*/

overflow:hidden;/*if something goes outside of a div i don't want a scrollbar to appear, i want it

to be hidden*/

}

/* ~~~~~~~~ Header ~~~~~~~~~~*/

header{

position:inherit;

color:#ffffff; /* color of text */

min-height:30px; /*min-height instead of height, that way when it's responsive and the screen is

smaller and the text grow or the menu goes in the next line we want the high to adjust*/

}

header a{

display:table-cell;

vertical-align: middle;

float:left;

padding-top: 5px;

}

header form{

float:left;

vertical-align: middle;

padding-top: 10px;

padding-left:5px;

}

#nav-search {

text-align:center;

width: 150px;

height: 30px;

}

header .info{

display:table-cell;

padding-left: 100px;

padding-top:20px;

}

header h5{

display:table-cell;

padding-left: 20px;

}

header .btn-success{

float:right;

top:50%;

transform: translateY(-80%);

margin-left:5px;

}

/* ~~~~~~~~ Navigate ~~~~~~~~~~*/

#navigate {

height: 200px;

width: 100%;

background-color:red;

}

+1

是'＃navigate'声明不是出于某种原因'block'元素其他什么吗？如果将'display：block'声明为'＃navigate'，你会得到预期的结果吗？另一种确定该选择器是否应用的方法是调整字体颜色，因为这是您目前可以看到的元素的唯一可见部分，请尝试将其颜色更改为明显的颜色，如“红色”。如果这个规则适用，你会知道你的选择器是有效的，这个问题可能与其他元素的显示类型有关，或者是另外一些缺失的规则。 –

+0

那就是解决方案。如果我声明显示：块来＃导航它的作品。非常感谢我不知道显示是如此重要。 –

+0

您可能希望为您的显示角色重置规则数组添加'div'，这样您就不会遇到任何其他'div'的问题。 –