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：）

Answer 2

试试这个

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

Answer 3

我建议你清理你的HTML和CSS。假设您正在使用HTML5，则可以使用nav元素。我也会停止使用这么多的ID。它们可以用于javascript，但在大多数情况下它们是不必要的。

大部分CSS也是不必要的。为什么要为每个元素声明颜色？为什么要声明显示：对已经显示的元素进行内联块处理：以内联块开头？如果可能，你应该删除它们。

HTML

<div class="menuContainer">
    <nav>
        <ul>
          <li><a href="top-angebote.html" onfocus="blurLink(this);">TOP ANGEBOTE</a></li>
        </ul>
        <ul>
          <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);">REIFEN/ KOMPLETTRÄDER</a></li>
        </ul>
    </nav>
</div>

CSS

.menuContainer
{
    position: relative;
    float:left;
    padding:0px;
    margin:0px;
} 

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

nav ul 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

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

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

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

nav a:hover, nav a:active, nav a: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);
}

CSS类不起作用

3 个答案:

HTML

CSS