我的CSS代码中不断出现解析错误。它出什么问题了？

时间：2019-05-08 01:30:15

标签： css

我不断在CSS Validator上收到解析错误代码。我不知道怎么了。我需要新鲜的眼睛来帮助我！谢谢！

我检查了我是否使用了错误的字符并且没​​有发现任何东西。

    @charset "utf-8";







/*mobile layout*/

    html{
    box-sizing: border-box;
    height: 100%;

}

    body{
    font-family: verdana, geneva, sans-serif;
    font-weight: normal;
    line-height: 1.3em;
}

    h2{
    color: rgba(124, 31,140,1);
}

    img, video{
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

    footer{
    flex: 1;
    padding: 3px;
    text-align: center;
    background-color: rgba( 71, 82,164,1);
    color: white;
}

/* container rules*/

    #tableContainer{
  display: flex;
  flex-wrap: wrap;
  height: 100%    


}

    section, aside{
    padding: 1px;
    margin: 1px;
    border: solid 2px rgba( 45, 57,147,1);

}


    #left{
   flex: 1;
}

    #middle{
   flex: 2;
}

    #right{
  flex: 3;
}




/* nav rules */


    nav a{
    display: block;
    width: 100%;
}


    nav ul{
    margin: 3px;
    padding: 5px 0px;
    list-style-type: none;
    font-family: verdana, geneva, sans-serif;

}

    .logo{
    padding: 1px;
    margin: 0px;

}


    .mainNav{
    list-style-type: none;
    margin: 5px;
    padding: 3px;
     overflow: hidden;

}


    .logo, .mainNav{
    padding: 5px 1px;   
    display: flex;

}

    .mainNav a:hover{
    color: rgba(194,199,238,1);
}

    .header{
    padding-bottom: 2px;
    padding-top: 2px;
    background-color: rgba( 71, 82,164,1);
    color: rgba( 45, 57,147,1);
    flex-direction: column;
    align-items: center;

}

    .header, .mainNav{
    display: flex;

}

    header img{
    width: 200px;

}

    li {
    float: left;
    text-decoration: none;

}

     li a {
      display: block;
      padding: 8px;
      text-decoration: none;    

/* Media Queries */

    @media (min-width: 740px){

    .header, .mainNav{
        display: flex;
    }

    #tableContainer{
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        flex-basis: 100%;       
     }

    #left, #middle{
        flex-basis: 48%;
    }

    aside{
        flex-basis: 88%;
    }

    .header{
       align-content:space-around;

    }





    @media (min-width: 940px){


    .header{
    flex-direction: row;
    justify-content: space-between;
    display: block;
}

    #left, #middle{
        flex-basis: 38%;
    }

    aside{
        flex-basis: 38%;
    }


    footer{
        flex: 1;
        padding: 3px;
        text-align: center;
        background-color: rgba( 71, 82,164,1);
        color: white;
    }



/* table rules */

    table{
    max-width: 720px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding: 3px;
    border: 1px solid #2D3993;
    border-collapse: collapse;
    margin-bottom: 15px;
}

    th{
    font-weight: bold;
    color: #4752A4;
    text-align: center;
    background-color: white;
}

    th td{
    font-family: 'josefin_slabregular', sans-serif;
    display: inline-table;
    text-align: center;
    padding: 5px;
    border: thin solid rgba( 45, 57,147,.5);
}

    td>a{
    color: #4F2992;
}

    .alternate tr:nth-child(odd){
    background-color: rgba(103,113,189,.5);
}



/*Form Rules*/

    *{
    box-sizing: border-box;
}

    #form {
    margin-left: auto;
    margin-right: auto;
    padding: 2px;

}

    fieldset {
    margin: 15px;
    max-width: 95%;

}

    legend {
    font-size: 1.3em;
    margin-bottom: 15px;
}

    textarea{
    width: 80%;
    margin-top: 10px;
}

它显示一个错误，我希望没有解析代码错误！谢谢！

3 个答案:

答案 0 :(得分：1)

您忘记在'li a'和

中添加封闭的黄铜

答案 1 :(得分：0)

.header .mainNav{ /* I have removed the coma */
    display: flex;

}

/ *媒体查询* / 

    @media (min-width: 740px){

    .header .mainNav{   /* I have removed the coma */
        display: flex;
    }

    #tableContainer{
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        flex-basis: 100%;       
     }

    #left #middle{ /* I have removed the coma */
        flex-basis: 48%;
    }

    aside{
        flex-basis: 88%;
    }

    .header{
       align-content:space-around;

    }

} /* you forgot the braces here */

@media（最小宽度：940像素）{

.header{
flex-direction: row;
justify-content: space-between;
display: block;

} 

 #left #middle{ /*removed the coma here */
        flex-basis: 38%;
    }

    aside{
        flex-basis: 38%;
    }

答案 2 :(得分：0)

检查此工作CSS代码 还要检查媒体查询940，在标题u可以将关闭bracjet移至所需位置后，我已将其关闭

/*mobile layout*/
    html{
    box-sizing: border-box;
    height: 100%;
}
    body{
    font-family: verdana, geneva, sans-serif;
    font-weight: normal;
    line-height: 1.3em;
}
    h2{
    color: rgba(124, 31,140,1);
}
    img, video{
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}
    footer{
    flex: 1;
    padding: 3px;
    text-align: center;
    background-color: rgba( 71, 82,164,1);
    color: white;
}
/* container rules*/
    #tableContainer{
  display: flex;
  flex-wrap: wrap;
  height: 100%    
}
    section, aside{
    padding: 1px;
    margin: 1px;
    border: solid 2px rgba( 45, 57,147,1);
}
    #left{
   flex: 1;
}
    #middle{
   flex: 2;
}
    #right{
  flex: 3;
}
/* nav rules */
    nav a{
    display: block;
    width: 100%;
}
    nav ul{
    margin: 3px;
    padding: 5px 0px;
    list-style-type: none;
    font-family: verdana, geneva, sans-serif;
}
    .logo{
    padding: 1px;
    margin: 0px;
}
    .mainNav{
    list-style-type: none;
    margin: 5px;
    padding: 3px;
     overflow: hidden;
}
    .logo, .mainNav{
    padding: 5px 1px;   
    display: flex;
}
    .mainNav a:hover{
    color: rgba(194,199,238,1);
}
    .header{
    padding-bottom: 2px;
    padding-top: 2px;
    background-color: rgba( 71, 82,164,1);
    color: rgba( 45, 57,147,1);
    flex-direction: column;
    align-items: center;
}
    .header, .mainNav{
    display: flex;
}
    header img{
    width: 200px;
}
    li {
    float: left;
    text-decoration: none;
}
     li a {
      display: block;
      padding: 8px;
      text-decoration: none; 
      }  
/* Media Queries */
    @media (min-width: 740px){
    .header, .mainNav{
        display: flex;
    }
    #tableContainer{
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        flex-basis: 100%;       
     }
    #left, #middle{
        flex-basis: 48%;
    }
    aside{
        flex-basis: 88%;
    }
    .header{
       align-content:space-around;
    }
}

    @media screen and (min-width: 940px){
    .header{
    flex-direction: row;
    justify-content: space-between;
    display: block;
}
}
    #left, #middle{
        flex-basis: 38%;
    }
    aside{
        flex-basis: 38%;
    }
    footer{
        flex: 1;
        padding: 3px;
        text-align: center;
        background-color: rgba( 71, 82,164,1);
        color: white;
    }
/* table rules */
    table{
    max-width: 720px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding: 3px;
    border: 1px solid #2D3993;
    border-collapse: collapse;
    margin-bottom: 15px;
}
    th{
    font-weight: bold;
    color: #4752A4;
    text-align: center;
    background-color: white;
}
    th td{
    font-family: 'josefin_slabregular', sans-serif;
    display: inline-table;
    text-align: center;
    padding: 5px;
    border: thin solid rgba( 45, 57,147,.5);
}
    td>a{
    color: #4F2992;
}
    .alternate tr:nth-child(odd){
    background-color: rgba(103,113,189,.5);
}
/*Form Rules*/
    *{
    box-sizing: border-box;
}
    #form {
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
}
    fieldset {
    margin: 15px;
    max-width: 95%;
}
    legend {
    font-size: 1.3em;
    margin-bottom: 15px;
}
    textarea{
    width: 80%;
    margin-top: 10px;
}

相关问题
最新问题