我将CSS转移到另一个文件后，我的某些部分无法正常工作

Question

我有这个完美工作的CSS，我试图将它的一部分放到另一个css文件中，这样它看起来不像以前那样杂乱。我这样做了，并将新的css文件链接到我的html但它没有用。所以，我尝试将css代码放回原来的css文件，它仍然无法正常工作！我怎么可能做错了？

只有那部分css无法正常工作 - 我尝试转移的部分。其余的代码工作正常。

Answer 1

我已经清理了你的CSS因为你有开放元素，嵌套元素和什么不是。你有：

body {
    /*position:relative;*/
    min-height: 100%;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:"Century Gothic", Arial;
}
#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:#ccc;
    overflow:hidden;
    z-index: -2;
}
#mask {
    width:400%;
    height:100%;
    background-color:#06009C;
}
.item {
    width:25%;
    height:100%;
    float:left;
    background-color:#06009C;
}
.content {
    width:100%;
    height:95%;
    top:2.5%;
    margin:0 auto;
    background-color:#6186CF;
    background-image:url(../images/blue%20wallpaper.jpg);
    background-repeat: no-repeat;
    position:relative;
}
.selected {
    background:#fff;
    font-weight:700;
}
.clear {
    clear:both;
}
#center {
    top: 1%;
    position: fixed;
    width: 100%;
    z-index: 1;
}
/* NAVIGATION BAR */
 .nav {
    left: 0;
    position:relative;
    width: 1500px;
    max-width: 1500px;
}
.nav ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
.nav li {
    display:block;
    float:left;
}
.nav a {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    width: 110px;
    height: 70px;
    background-color:#3961B4;
    text-decoration:none;
    text-align:center;
    color: White;
    font-size: 12px;
    padding: 3px;
    border-right: 1px solid #000000;
    box-shadow: 0 5px 5px #242424;
}
.nav a:hover {
    background-color: #FFFFFF;
    color: #000000;
}
.nav ul li img {
    position: relative;
    margin: auto;
}
.nav ul li:nth-child(10) a {
    width: 75px;
    height: 70px;
}
.nav ul li:nth-child(1) a {
    width: 200px;
    height: 70px;
    text-align: right;
}
.nav ul li:nth-child(11) a {
    width: 133px;
    height: 70px;
    border:0;
}
.nav ul li img {
    position:relative;
    margin: auto;
}
/************************/
 .bpmimage {
    position:relative;
    left: 1%;
    top: 10%
}
/* OVERLAY */
 .overlay {
    position:absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
.modal {
    width: 1000px;
    ;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -500px;
    background-color: #FFFFFF;
    border-radius: 5px;
    text-align: center;
    z-index: 11;
}
.zoomedoutwrapper {
    width: 975px;
    height: 355px;
    margin: 1% auto auto auto;
}
.zoomedout {
    float: left;
}

 .maptitle {
    font-family:Gotham, "Century Gothic", Helvetica, Arial, sans-serif;
}

/*** FLOWCHART ****/

/** shapes **/
 .arrow-right {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid black;
}
.arrow-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid black;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
}
.gateway {
    width: 20px;
    height: 20px;
    background-color: #000000;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    color: #fff;
}
.h-dottedline {
    font-size:0;
    height:300px;
    width: 1px color:#fff;
    border: 1px dashed black;
}
.v-dottedline {
    font-size:0;
    height:1px;
    color:#fff;
    border: 1px dashed black;
}
.flowchart {
    margin: 100px 0 0 50px;
    width:1370px;
    max-width:1370px;
    font-size: 12px;
}
.flowchart > div {
    float: left;
}
.flowchart a {
    display:block;
}
.horizontal {
    font-size:0;
    height:1px;
    color:#fff;
    background-color:#000;
}
.vertical {
    font-size:0;
    width:1px;
    color:#fff;
    background-color:#000;
}
#flowchart1 {
    margin: 100px 0 0 50px;
    width:1370px;
    max-width:1370px;
    font-size: 12px;
}
#flowchart1 > div {
    float: left;
}
#flowchart1 a {
    display:block;}
    #line1 {
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
    }
    #line2 {
        font-size:0;
        width:1px;
        height:40px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
    }
    #line3 {
        font-size:0;
        width:1px;
        height:40px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
        margin-left: 151px;
    }
    #line4 {
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
    }
    #arrow1 {
        margin: 32px 0 0 0;
    }
    #no2 {
        margin-top: 5px;
    }
    #line5 {
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
    }
    #line6 {
        font-size:0;
        width:1px;
        height:40px;
        color:#fff;
        background-color:#000;
        margin-top: 40px;
    }
    #no3 {
        clear:both;
        margin:23px 0 0 0;
    }
    #line7 {
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #line8 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:96px;
        color:#fff;
        background-color:#000;
        margin-top: 0;
    }
    #line9 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #arrow2 {
        margin-top: 47px;
    }
    #gateway1 {
        margin-top: 0;
        margin-left: 0;
    }
    #line10 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #line11 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:96px;
        color:#fff;
        background-color:#000;
        margin-top: 0;
    }
    #line12 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:96px;
        color:#fff;
        background-color:#000;
        margin-left: 224px;
    }
    #line13 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #arrow3 {
        margin-top: 47px;
    }
    #gateway2 {
        margin-top: 30px;
        margin-left: 0;
    }
    #line14 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #arrow4 {
        margin-top: 47px;
    }
    #no4 {
        margin:23px 0 0 0;
    }
    #no5 {
        clear:both;
        margin:23px 0 0 0;
    }
    #dline1 {
        /**H dottedline*/
        font-size:0;
        width:430px;
        color:#fff;
        margin-top: 55px;
        margin-left: 0px;
    }
    #line15 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #line16 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:56px;
        color:#fff;
        background-color:#000;
        margin-top: 0;
    }
    #line17 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:56px;
        color:#fff;
        background-color:#000;
        margin-left: 151px;
    }
    #line18 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #arrow5 {
        margin-top: 47px;
    }
    #no6 {
        margin:23px 0 0 0;
    }
    #line19 {
        /**horizontal**/
        font-size:0;
        width:50px;
        height:1px;
        color:#fff;
        background-color:#000;
        margin-top: 55px;
    }
    #line20 {
        /**vertical**/
        font-size:0;
        width:1px;
        height:56px;
        color:#fff;
        background-color:#000;
        margin-left: 0;
    }
    #arrow6 {
        clear:both;
        margin-top: 0;
        margin-left: 450px;
    }
    #dline2 {
        /**V dottedline**/
        clear:both;
        font-size:0;
        height:300px;
        color:#fff;
        margin-left: 456px;
    }
    /*Mobile Engineering & Implementation FLOWCHART*/
    #f2line10 {
        /**VERTICAL**/
        height:56px;
        margin-top: 14px;
        margin-left: 598px;
    }
    #f2line11 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 14px;
    }
    #f2arrow10 {
        margin: 10px 0 0 0;
    }
    #f2line12 {
        /**HORIZONTAL**/
        width:182px;
        margin-top: 14px;
    }
    #f2line13 {
        /**VERTICAL**/
        height:56px;
        margin-top: 14px;
    }
    #f2arrow11 {
        clear:both;
        margin-left: 948px;
    }
    #f2no1 {
        clear:both;
    }
    #f2line1 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow1 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line2 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow2 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line3 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow3 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line4 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow4 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line5 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow5 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line6 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow6 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line7 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow7 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2gateway1 {
        margin-top: 8px;
    }
    #f2gateway2 {
        margin-top: 8px;
    }
    #f2line8 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow8 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line9 {
        /**HORIZONTAL**/
        width:20px;
        margin-top: 32px;
    }
    #f2arrow9 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2line15 {
        /**VERTICAL**/
        clear:both;
        height:35px;
        margin-top: 0;
        margin-left: 598px;
    }
    #f2line16 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f2arrow12 {
        margin-left: 0;
        margin-top: 25px;
    }
    #f2no10 {
        margin-top: 12px;
    }
    #f2line17 {
        /**HORIZONTAL**/
        width:183px;
        margin-top: 34px;
    }
    #f2arrow13 {
        clear:both;
        margin-left: 948px;
        margin-top: 0;
    }
    #f2line18 {
        /**VERTICAL**/
        height:35px;
        margin-top: 0;
        margin-left: 0;
    }
    /****/
    /**Operations Flowchart **/
    #f3line1 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f3dline1 {
        /**V dottedline**/
        height: 50px;
        margin-left: 0;
    }
    #f3line2 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f3line3 {
        /**VERTICAL**/
        height:35px;
        margin-top: 34px;
        margin-left: 0;
    }
    #f3line4 {
        /**VERTICAL**/
        height:35px;
        margin-top: 34px;
        margin-left: 10px;
    }
    #f3line5 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f3arrow1 {
        margin-left: 0;
        margin-top: 27px;
    }
    #f3line6 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f3arrow2 {
        margin-left: 0;
        margin-top: 27px;
    }
    #f3line7 {
        /**HORIZONTAL**/
        width:50px;
        margin-top: 34px;
    }
    #f3line8 {
        /**VERTICAL**/
        height:35px;
        margin-top: 34px;
        margin-left: 0;
    }
    #f3arrow3 {
        clear:both;
        margin-left: 210px;
        margin-top: 0;
    }
    #f3arrow4 {
        margin-left: 395px;
        margin-top: 0;
    }
    /************/
    /*MAPS INTRO MESSAGE*/
    .intro-wrapper {
        margin: 100px 0 0 100px;
        float: left;
        width: 350px;
        height: 350px;
        text-align: right;
    }
    .intro-wrapper span {
        font-size: 70px;
        text-align: right;
    }
    .intro-wrapper p {
        text-align: right;
    }

或查看fiddle here

Answer 2

第116行缺少分号，而第130行有一个分号，应该删除，我会从那里开始检查代码的其余部分。