流星的CSS問題？

你能看到下面的代碼和錯誤（當點擊一個按鈕時得到錯誤）。我沒有得到任何關於這個錯誤的想法，但我希望認爲這個錯誤得到的CSS問題。所以請幫助我什麼爲了這個問題嗎？流星的CSS問題？

錯誤：

[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"); 

    } 
    }); 
}

來源

2014-04-01 Venkat

流星應用程序中的css比您在代碼中共享的要多。他們可以從其他包裹進來。

點擊：

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

（或任何URL你運行你的CSS當時的控制檯打印您的應用程序），並檢查線路142和143

你會發現一個壞的CSS選擇器，或者可能是一些缺少的花括號。

除此之外，在編輯器中使用css hinting/linting工具，以便儘早捕獲css錯誤。

來源

2014-04-01 15:31:49

我可以發佈我的代碼的完整CSS，可以請檢查一次。小括號都是正確的，但爲什麼出現這個問題我沒有得到任何想法，請幫助我。@ Serkan Durusoy。 – Venkat

您是從項目目錄中添加css文件還是從控制檯上看到的'http：// localhost：3000/xxxxxxxxxxxx.css'鏈接添加它？ –

如何將此鏈接添加到項目目錄意味着我不完全明白你的意思。你能幫我嗎？@ Serkan Durusoy – Venkat

流星的CSS問題？

回答

相關問題