html - CSS 类不起作用

Question

继承无效。 navlink_0 类正在运行，但 navlink_1 类未运行。它回到了 css 文件开头的声明。怎么了？

我的 HTML 和 CSS 文件:

<div id="menu">
<div id="main_nav">
    <ul class="mainnav">
        <li><a href="top-angebote.html" onfocus="blurLink(this);" class="navlink_0">TOP ANGEBOTE</a>
        </li>
    </ul>
    <ul class="mainnav">
        <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);" class="navlink_1">REIFEN/ KOMPLETTRÄDER</a>
        </li>
    </ul>
</div>
</div>


#menu
{
   position: relative;
   float:left;
   padding:0px;
   margin:0px;
}

#main_nav
{
   color: #FFF;
   font-size: 12px;
   font-style: italic;
   display: inline-block;
   font-weight: bold;
}

#main_nav .mainnav 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

#main_nav ul {
   color: #FFF;
   padding:0px;
   margin:0px;
   list-type:none;
}


#main_nav .mainnav li
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display:inline-block;
}

#main_nav .navlink_0
{
   color: #FFF;
   padding: 10px;
   text-decoration: none;
   line-height: 30px;
   display: inline-block;
   font-weight: bold;
}


#main_nav a.navlink_0:link, a.navlink_0:visited
{
   color: #FFF;
   text-decoration: none;
   background-color: #0863AA;
   background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
   background-repeat: repeat-x;
}

#main_nav a.navlink_0:hover, a.navlink_0:active, a.navlink_0:focus
{
   color: #FFF; 
   text-decoration: none;
   background-color:#ac0727;
   background-image:-webkit-gradient(linear,left 0%,left 100%,from(#e4041f),to(#ac0727));
   background-image:-webkit-linear-gradient(top,#e4041f,0%,#ac0727,100%);
   background-image:-moz-linear-gradient(top,#e4041f 0%,#ac0727 100%);
   background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100
   background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe4041f',endColorstr='#ffac0727',GradientType=0);color:#ffffff;
}

#main_nav .navlink_1
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */    
}

#main_nav  a.navlink_1:link, a.navlink_1:visited
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}

#main_nav  a.navlink_1:hover, a.navlink_1:active, a.navlink_1:focus
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}

Answer 1

你的 CSS 坏了，看那行:

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100

缺少 %); :

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100%);

所以 CSS 遇到错误，它在那里停止渲染，这就是 .navlink_1 无法正确渲染的原因。

我强烈建议清理您的 CSS :)