Css覆蓋nodejs快速啓動

Question

我已經開發了Java + Spring的移動Web應用程序，因爲響應緩慢，我現在試圖在node.js上實現同樣的事情。

我使用bootstrap.css和styles.css作爲我的站點特定樣式和一些bootstrap覆蓋。在我以前的實現中，一切正常，但現在在nodejs上，自引導的所有樣式都會直接應用於我的標記，而來自styles.css的所有覆蓋都會被chrome忽略。任何想法我錯過了什麼。

這裏是我的問題

一些標記，從HTML

<div class="row"> 
     <ul id="tabs-menu" class="nav nav-tabs"> 
      <li class="active"><a href="#bollywood" rel="1">Bollywood</a></li> 
      <li><a href="#western" rel="3">Western</a></li> 
      <li><a href="#pakistani" rel="2">Pakistani</a></li> 
      <li><a href="#islamic" rel="4">Islamic</a></li> 
     </ul> 
</div> 

CSS屬性的例子筆畫演示與//忽略檢查由鉻

//from bootstrap 
    .nav-tabs > li > a:hover { 
     border-color: #eeeeee #eeeeee #dddddd; 
    } 

    //from bootstrap 
    .nav > li > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #eeeeee; 
    } 

    //from bootstrap 
    .nav-tabs > li > a { 
     margin-right: 2px; 
     line-height: 1.428571429; 
     border: 1px solid transparent; 
     border-radius: 4px 4px 0 0; 
    } 

    //from bootstrap 
    .nav > li > a { 
     position: relative; 
     display: block; 
     padding: 10px 15px; 
    } 

    //from style.css 
    .nav>li>a { 
     color: #000; 
     background: #ddd; 
    } 
    //from style.css 
    .nav>li>a { 
     padding: 3px 1px 3px 1px; //ignored 
     margin-bottom: 1px; 
     margin-right: 1px; //ignored 
     border-radius: 0px; //ignored 
     font-size: 13px; 
    } 

問題是款式的style.css在最後的評論被鉻忽略，因爲在我以前的實現完全相同的代碼完美工作。

，這裏是我的style.css

body { 
    min-height: 500px; 
    padding-top: 70px; 
    padding-bottom: 70px; 
    font-family: 'juice_light'; 
} 

a 
{ 
    color:#CA4242; 
} 

a:hover 
{ 
    color:#B71B1B; 
} 

.navbar-default { 
    background-color: #fff; 
    border-color: #e7e7e7; 
} 

.navbar-header { 
    width:100%; 
} 

.navbar 
{ 
    min-height:65px; 
} 

#MyPlayQueue 
{ 
    float: right; 
    padding: 15px; 
    font-size: 14px; 
    line-height: 40px; 
    height: 20px; 
    color: #000; 
    font-weight: bold; 
} 

#MyPlayQueue 
{ 
    float: right; 
    padding: 20px 5px 0px 0px; 
    font-size: 14px; 
    line-height: 30px; 
    height: 20px; 
    color: #000; 
    font-weight: bold; 
} 

#MyPlayQueue:hover 
{ 
    color:#CA4242; 
} 


.row 
{ 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom:10px; 
} 

.nav>li>a { 
    padding:3px 1px 3px 1px; 
    margin-bottom: 1px; 
    margin-right: 1px; 
    border-radius: 0px; 
    font-size: 13px; 
} 

.tab-content>.active { 
    padding: 10px 0px; 
} 

.nav>li>a { 
    color: #000; 
    background:#ddd; 
} 

.nav-tabs { 
    border-bottom: 5px solid #D71921; 
} 

.nav-tabs>li.active>a 
{ 
    color: #fff; 
    background:#d71921; 
    cursor:pointer; 
} 
.nav-tabs>li.active>a:hover 
{ 
    color: #fff; 
    background:#D52737; 
} 

#sub-categories, #sub-menu 
{ 
    clear:both; 
    text-align: center; 
    padding: 10px 0px 0px; 
} 

p { 
    margin: 0 0 5px; 
} 

@font-face { 
    font-family: 'juice_light'; 
    src: url('/fonts/juice_light-webfont.eot'); 
    src: url('/fonts/juice_light-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/fonts/juice_light-webfont.woff') format('woff'), 
     url('/fonts/juice_light-webfont.ttf') format('truetype'), 
     url('/fonts/juice_light-webfont.svg#juice_lightregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@font-face { 
    font-family: 'juice_regular'; 
    src: url('/fonts/juice_regular-webfont.eot'); 
    src: url('/fonts/juice_regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/fonts/juice_regular-webfont.woff') format('woff'), 
     url('/fonts/juice_regular-webfont.ttf') format('truetype'), 
     url('/fonts/juice_regular-webfont.svg#juice_regularregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

#content 
{ 
    padding:0px 0px 70px; 
} 

#content .stub_holder 
{ 
    display: block; 
    width: 120px; 
    height: 120px; 
    background: -15px -10px url("../images/stub_image.png"); 
} 

#content #albumStage 
{ 
    vertical-align:bottom; 
    display:block; 
} 

#content #albumStage .albumCover img 
{ 
    border:5px solid #eee; 
    width:100px; 
} 

#content #albumStage .info .albumCover 
{ 
    float:left; 
} 

#content #albumStage .info .albumInfo 
{ 
    padding-left:115px; 
} 

#content #albumStage .info .albumInfo .albumTitle 
{ 
    font-size:20px; 
} 

#content #albumStage .info .albumInfo .albumCategory 
{ 
    font-size:20px; 
} 
#content #albumStage .info .albumInfo .albumTracks 
{ 
    font-size:14px; 
} 

#content #albumStage #albumControls 
{ 
    clear:both; 
    display:block; 
    padding:10px 0px 10px 0px; 
} 

#content #albumStage #albumControls .albumControls 
{ 
    background:#D71921; 
    padding:5px; 
    border:3px solid #ccc; 
    color:#fff; 
    margin:3px 6px 3px 0px; 
    cursor:pointer; 
} 

#content ul#albums, #content ul#songs 
{ 
    list-style-type:none; 
    padding: 0px; 
} 

#content ul#songs 
{ 
    padding-left:0px; 
    width:100%; 
} 

#content ul#songs li.song, #content ul#songs li.song_end 
{ 
    padding:20px 5px 40px 5px; 
    border-top:1px solid #aaa; 
    display:block; 
    clear:both; 
} 

#content ul#songs li.song_end 
{ 
    text-align: center; 
} 

#content ul#songs li.song.alternate 
{ 
    background:#f2f2f2; 
} 

#content ul#songs li.song .streamControls img 
{ 
    padding-right: 3px; 
    width:25px; 
} 

#content ul#songs li.song .streamControls, #content ul#songs li.song .songDetail 
{ 
    float:left; 
    padding-right:5px; 
} 

#content ul#songs li.song .songDetail 
{ 
    max-width: 210px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

#content ul#songs li.song .queueControls 
{ 
    padding-right: 5px; 
    float: right; 
} 


#content ul#albums li.album 
{ 
    float:left; 
    padding:3px; 
    height: 170px; 
} 

#content ul#albums li.album img 
{ 
    border : 5px solid #ddd; 
    width: 120px; 
} 

#content ul#albums li.album .albumTitle 
{ 
    display:block; 
    font-weight:bold; 
    padding-top:2px; 
    text-align:center; 
    width:120px; 
} 

#content ul#albums li.album a 
{ 
    color:#000; 
} 

#aEnd 
{ 
    clear: both; 
    text-align: center; 
    border: 1px solid #ddd; 
    padding: 10px; 
} 

.loader 
{ 
    display:inline-block; 
} 

.load-progress { 
    width: 150px; 
    background-color: #aaa; 
    height: 5px; 
} 

.play-progress { 
    width: 0px; 
    background-color: #333; 
    height: 5px; 
} 

.row.footer 
{ 
    opacity:0.9; 
    position: fixed; 
    bottom: 0px; 
    padding:0px; 
    padding-top:5px; 
    margin:0px 0px 0px -15px; 
    height:70px; 
    width:100%; 
    background:#000; 
} 

#playListSeekBar, #playListControls 
{ 
    text-align:center; 
} 

#playListSeekBar, #playListControls img 
{ 
    padding-left:10px; 
    padding-right:10px; 
} 

#playListSeekBar, #playListControls img.control 
{ 
    cursor:pointer; 
} 

#playListSeekBar .timers 
{ 
    color:#aaa; 
} 

#playListSeekBar .timers#timeLeft 
{ 

} 

#playListSeekBar #controls_playList 
{ 
    padding-bottom: 3px; 
} 

另外這裏是layout.jade如果它有助於理解我的問題

doctype html 
html 
    head 
    title= title 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
    meta(name='viewport', content='width=device-width', initial-scale='1.0') 
    meta(name='author', content='Khushal Khan') 
    meta(name='description', content='Mobilink Streaming Web App') 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    link(rel='stylesheet', href='/stylesheets/bootstrap.css') 
    link(rel='shortcut icon', href="/images/favicon.ico") 

    // 
     script(src='/javascripts/less-1.3.3.min.js') 

    //if lt IE 9 
     script(src='/javascripts/html5shiv.js') 

    script(type='text/javascript', src='/javascripts/jquery.min.js') 
    script(type='text/javascript', src='/javascripts/bootstrap.min.js') 
    script(type='text/javascript', src='/javascripts/scripts.js') 
    body 
    block content 

Answer 1

好吧，那我認出幾件事情：

• 第一個：你的第一個例子不工作可能是因爲你的// comments。 //在CSS中是不標準的，所以一些瀏覽器會誤解這一點。
• 第二個：對我來說你的示例代碼工作正常，除了這些//問題。
• 第三：我相信你的問題是通過首先調用你個人的style.css，並且被給定的bootstrap.css部分覆蓋。

請嘗試以下這段代碼，在那裏我改變了你的鏈接的css文件的位置：

doctype html 
html 
    head 
    title= title 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
    meta(name='viewport', content='width=device-width', initial-scale='1.0') 
    meta(name='author', content='Khushal Khan') 
    meta(name='description', content='Mobilink Streaming Web App') 
    link(rel='stylesheet', href='/stylesheets/bootstrap.css') 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    link(rel='shortcut icon', href="/images/favicon.ico") 

    // 
     script(src='/javascripts/less-1.3.3.min.js') 

    //if lt IE 9 
     script(src='/javascripts/html5shiv.js') 

    script(type='text/javascript', src='/javascripts/jquery.min.js') 
    script(type='text/javascript', src='/javascripts/bootstrap.min.js') 
    script(type='text/javascript', src='/javascripts/scripts.js') 
    body 
    block content