Проблема CSS в Метеор?

Question

Не могли бы вы видеть приведенный ниже код и ошибку (получает ошибку, когда когда-либо нажимает кнопку). Я не знал об этой ошибке, но я надеюсь, что эта ошибка вызывает проблему css.So, пожалуйста, помогите мне, что сделать для этой проблемы?

Ошибка:

[20:37:40.994] The connection to ws://localhost:3000/sockjs/726/z_lwffha/websocket was interrupted while the page was loading. @ http://localhost:3000/packages/livedata.js?7f11e3eaafcbe13d80ab0fb510d25d9595e78de2:1338 
[20:37:41.012] GET http://localhost:3000/ [HTTP/1.1 200 OK 4ms] 
[20:37:41.085] Selector expected. Ruleset ignored due to bad selector. @ http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css:142 
[20:37:41.090] Unexpected end of file while searching for closing } of invalid rule set. @ http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css:143 
[20:37:41.199] GET http://localhost:3000/sockjs/info?cb=lw6ruqspkl [HTTP/1.1 200 OK 2ms] 
[20:37:41.215] GET http://****:3000/sockjs/274/pw0wlh20/websocket [HTTP/1.1 101 Switching Protocols 3ms] 

[16: 30: 20,289] Селектор ожидалось. Правила не учитываются из-за плохого выбора. @ HTTP: // *: 3000/20c1b4c895661a31348add34943984dc35828465.css: 193:

* { 
    /* A universal CSS reset */ 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-size: 14px; 
    color: #666; 
    background: #111 no-repeat; 
    /* CSS3 Radial Gradients */ 
    background-image: -moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); 
    background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); 
    font-family: Arial, Helvetica, sans-serif; 
} 

#navigationMenu li { 
    list-style: none; 
    height: 39px; 
    padding: 2px; 
    width: 40px; 
} 

#navigationMenu span { 
    width: 0; 
    left: 38px; 
    padding: 0; 
    position: absolute; 
    overflow: hidden; 
    font-family: 'Myriad Pro',Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    letter-spacing: 0.6px; 
    white-space: nowrap; 
    line-height: 39px; 
    -webkit-transition: 0.25s; 
    -moz-transition: 0.25s; 
    transition: 0.25s; 
} 

#navigationMenu a { 
    background: url('img/navigation.jpg') no-repeat; 
    height: 39px; 
    width: 38px; 
    display: block; 
    position: relative; 
} 

/* General hover styles */ 

#navigationMenu a:hover span { 
    width: auto; 
    padding: 0 20px; 
    overflow: visible; 
} 

#navigationMenu a:hover { 
    text-decoration: none; 
    /* CSS outer glow with the box-shadow property */ 
    -moz-box-shadow: 0 0 5px #9ddff5; 
    -webkit-box-shadow: 0 0 5px #9ddff5; 
    box-shadow: 0 0 5px #9ddff5; 
} 

/* Green Button */ 

#navigationMenu .home { 
    background-position: 0 0; 
} 

#navigationMenu .home:hover { 
    background-position: 0 -39px; 
} 

#navigationMenu .home span { 
    background-color: #7da315; 
    color: #3d4f0c; 
    text-shadow: 1px 1px 0 #99bf31; 
} 

/* Blue Button */ 

#navigationMenu .about { 
    background-position: -38px 0; 
} 

#navigationMenu .about:hover { 
    background-position: -38px -39px; 
} 

#navigationMenu .about span { 
    background-color: #1e8bb4; 
    color: #223a44; 
    text-shadow: 1px 1px 0 #44a8d0; 
} 

/* Orange Button */ 

#navigationMenu .services { 
    background-position: -76px 0; 
} 

#navigationMenu .services:hover { 
    background-position: -76px -39px; 
} 

#navigationMenu .services span { 
    background-color: #c86c1f; 
    color: #5a3517; 
    text-shadow: 1px 1px 0 #d28344; 
} 

/* Yellow Button */ 

#navigationMenu .portfolio { 
    background-position: -114px 0; 
} 

#navigationMenu .portfolio:hover { 
    background-position: -114px -39px; 
} 

#navigationMenu .portfolio span { 
    background-color: #d0a525; 
    color: #604e18; 
    text-shadow: 1px 1px 0 #d8b54b; 
} 

/* Purple Button */ 

#navigationMenu .contact { 
    background-position: -152px 0; 
} 

#navigationMenu .contact:hover { 
    background-position: -152px -39px; 
} 

#navigationMenu .contact span { 
    background-color: #af1e83; 
    color: #460f35; 
    text-shadow: 1px 1px 0 #d244a6; 
} 

/* The styles below are only needed for the demo page */ 

#main { 
    margin: 80px auto; 
    position: relative; 
    width: 40px; 
} 

h1 { 
    color: #fff; 
    font-size: 30px; 
    font-weight: normal; 
    padding: 60px 0 20px; 
    text-align: center; 
} 

h2 { 
    font-weight: normal; 
    text-align: center; 
} 

h1, 
h2 { 
    font-family: "Myriad Pro",Arial,Helvetica,sans-serif; 
} 

a, 
a:visited, 
a:active { 
    color: #0196e3; 
    text-decoration: none; 
    outline: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

a img { 
    border: none; 
} 

p.note { 
    color: #707070; 
    font-size: 10px; 
    text-align: center; 
    margin: 50px; 
} 
//# sourceMappingURL=20c1b4c895661a31348add34943984dc35828465.map 

CSS:

*{ 
    /* A universal CSS reset */ 
    margin:0; 
    padding:0; 
} 

body{ 
    font-size:14px; 
    color:#666; 
    background:#111 no-repeat; 

    /* CSS3 Radial Gradients */ 
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); 
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); 

    font-family:Arial, Helvetica, sans-serif; 
} 

#navigationMenu li{ 
    list-style:none; 
    height:39px; 
    padding:2px; 
    width:40px; 
} 

#navigationMenu span{ 

    width:0; 
    left:38px; 
    padding:0; 
    position:absolute; 
    overflow:hidden; 


    font-family:'Myriad Pro',Arial, Helvetica, sans-serif; 
    font-size:18px; 
    font-weight:bold; 
    letter-spacing:0.6px; 
    white-space:nowrap; 
    line-height:39px; 


    -webkit-transition: 0.25s; 


    -moz-transition: 0.25s; 
    transition: 0.25s; 
} 

#navigationMenu a{ 
    background:url('img/navigation.jpg') no-repeat; 

    height:39px; 
    width:38px; 
    display:block; 
    position:relative; 
} 

/* General hover styles */ 

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } 
#navigationMenu a:hover{ 
    text-decoration:none; 

    /* CSS outer glow with the box-shadow property */ 
    -moz-box-shadow:0 0 5px #9ddff5; 
    -webkit-box-shadow:0 0 5px #9ddff5; 
    box-shadow:0 0 5px #9ddff5; 
} 

/* Green Button */ 

#navigationMenu .home { background-position:0 0;} 
#navigationMenu .home:hover { background-position:0 -39px;} 
#navigationMenu .home span{ 
    background-color:#7da315; 
    color:#3d4f0c; 
    text-shadow:1px 1px 0 #99bf31; 
} 

/* Blue Button */ 

#navigationMenu .about { background-position:-38px 0;} 
#navigationMenu .about:hover { background-position:-38px -39px;} 
#navigationMenu .about span{ 
    background-color:#1e8bb4; 
    color:#223a44; 
    text-shadow:1px 1px 0 #44a8d0; 
} 

/* Orange Button */ 

#navigationMenu .services { background-position:-76px 0;} 
#navigationMenu .services:hover { background-position:-76px -39px;} 
#navigationMenu .services span{ 
    background-color:#c86c1f; 
    color:#5a3517; 
    text-shadow:1px 1px 0 #d28344; 
} 

/* Yellow Button */ 

#navigationMenu .portfolio { background-position:-114px 0;} 
#navigationMenu .portfolio:hover{ background-position:-114px -39px;} 
#navigationMenu .portfolio span{ 
    background-color:#d0a525; 
    color:#604e18; 
    text-shadow:1px 1px 0 #d8b54b; 
} 

/* Purple Button */ 

#navigationMenu .contact { background-position:-152px 0;} 
#navigationMenu .contact:hover { background-position:-152px -39px;} 
#navigationMenu .contact span{ 
    background-color:#af1e83; 
    color:#460f35; 
    text-shadow:1px 1px 0 #d244a6; 
} 

/* The styles below are only needed for the demo page */ 

#main{ 
    margin:80px auto; 
    position:relative; 
    width:40px; 
} 


h1{ 
    color:#fff; 
    font-size:30px; 
    font-weight:normal; 
    padding:60px 0 20px; 
    text-align:center; 
} 

h2{ 
    font-weight:normal; 
    text-align:center; 
} 

h1,h2{ 
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif; 
} 

a, a:visited,a:active { 
    color:#0196e3; 
    text-decoration:none; 
    outline:none; 
} 

a:hover{ 
    text-decoration:underline; 
} 

a img{ 
    border:none; 
} 

p.note{ 
    color:#707070; 
    font-size:10px; 
    text-align:center; 
    margin:50px; 
} 

HTML:

<head> 
    <title>menuapp</title> 
</head> 

<body> 
    {{> hello}} 
</body> 

<template name="hello"> 
    <div id="main"> 

<ul id="navigationMenu"> 
    <li> 
     <a class="home" href=""> 
      <span>Home</span> 
     </a> 
    </li> 

    <li> 
     <a class="about" href=""> 
      <span>About</span> 
     </a> 
    </li> 

    <li> 
     <a class="services" href=""> 
      <span>Services</span> 
     </a> 
    </li> 

    <li> 
     <a class="portfolio" href=""> 
      <span>Portfolio</span> 
     </a> 
    </li> 

    <li> 
     <a class="contact" href=""> 
      <span>Contact us</span> 
     </a> 
    </li> 
</ul> 

</div> 
</template> 

JS код:

if (Meteor.isClient) 
{ 


    Template.hello.events 
({ 
    'click input': function (e,t) 
    { 
     // template data, if any, is available in 'this' 
     e.preventDefault(); 
     if (typeof console !== 'undefined') 
     console.log("You pressed the button"); 

    } 
    }); 
} 

Answer 1

В приложении метеорита больше css, чем в вашем коде. Они могут поступать из других пакетов.

Нажмите на:

http://localhost:3000/92c61cf6ca034d8fa89d536fe4f237f16053eaca.css 

(или любой другой URL консоль печатает для вашего CSS в то время, вы запустите приложение) и проверьте строки 142 и 143.

Вы найдете плохой CSS селектор или, возможно, некоторые отсутствующие фигурные скобки.

Кроме этого, используйте инструмент css hinting/linting в своем редакторе, чтобы на раннем этапе вы могли уловить ошибки css.