Css覆盖nodejs表示引导

我已经开发了Java + Spring的移动Web应用程序，因为我现在试图在node.js上实现同样的function。

我使用bootstrap.css和styles.css作为我的站点特定的样式和一些bootstrap覆盖。 在我以前的实现中，一切工作都正确，但是现在在nodejs上，所有来自bootstrap的样式都被直接应用到我的标记中，而来自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中的样式，//最后被忽略的注释被chrom忽略，正如在我以前的实现中完全相同的代码一样。

这是我的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