node.js - CSS 覆盖 Nodejs Express Bootstrap

Question

我用Java+Spring开发了一个移动Web应用程序，由于响应速度慢，我现在尝试在node.js、express上实现同样的东西。

我将 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>

chrome 检查的 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 中带有//ignored 注释的样式被 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

好吧，我认识到一些事情:

• 首先:您的第一个给定示例可能由于您的 //注释而无法正常工作。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