如何：悬停但不是：元素的第一个孩子？

我试图摆脱元素的第一个孩子悬停，但没有先进的。请问，你能帮助我吗？这是我试图调整的代码，但没有希望。如何：悬停但不是：元素的第一个孩子？

HTML 

       <ul class="nav navbar-nav navbar-right navs-header"> 
        <li style="color: white!important;"><a>Меню</a></li> 
        <?php if (Yii::$app->keyStorage->get('prolongation_enabled')): ?> 
         <li><a href="<?= \yii\helpers\Url::toRoute('/site/prolongation'); ?>">Пролонгация</a></li> 
        <?php endif; ?> 
        <?php if (Yii::$app->keyStorage->get('shop_enabled')): ?> 
         <li><a href="<?= \yii\helpers\Url::toRoute('/site/shop'); ?>"> Интернет - магазин</a></li> 
        <?php endif; ?> 
        <li><a href="<?= \yii\helpers\Url::toRoute('/site/about'); ?>">О ломбарде</a></li> 
        <li><a href="<?= \yii\helpers\Url::toRoute('/site/services'); ?>">Наши услуги </a></li> 
        <li><a href="<?= \yii\helpers\Url::toRoute('/site/news'); ?>">Новости </a></li> 
        <li><a href="<?= \yii\helpers\Url::toRoute('/site/contacts'); ?>">Связаться с нами</a></li> 
       </ul> 



    SAAS 

.navs-right { 
    li{ 
     border-top: solid 1px #b8b8b8; 
    &:first-child{ 
     background-color: #fbce00; 
     color: white!important; 
     font: 17px $fontFamilyAvBold!important; 
    } 
     a{ 
     font: $font17Size-Regularfamily; 
     padding: 15px 30px!important; 

     &:not(:first-child):hover{ 
      color: #fbad30!important; 
      font: 17px $fontFamilyAvBold!important; 
     } 
     } 

    } 
    }

来源

2017-09-26 Feruza

选择器似乎正在工作。 –

也许你有一个特殊的问题，你有一个codepen与所有涉及的代码，使更容易调试吗？ –

@JesusLugo我用html添加了整个代码。你可以查看 – Feruza

感谢张贴的代码，理想的交易将使用外部网站，如codepen。 io的;对我们来说更容易读取outpunt代码而不是PHP（我很习惯SCSS）。另一方面，CSS中的类.navs-right不存在于标记中。

据我所知，问题在于标记内部，每个链接都是:first-child（每个<li>标签内），所以您需要使用父项的第一个子项，对于这种情况，输出代码应该是这样的：

.navbar-right li:not(:first-child) a:hover { 
    color: #fbad30!important; 
    font: 17px $fontFamilyAvBold!important; 
}

这应该使它工作。你可以在这里看到https://codepen.io/jelur/pen/WZpbNP

结果现在，在代码的其他意见：

如果你想要的链接，有填充（或保证金），你需要使用display: inline-block（或块）。
我建议你反对过度使用!important

希望这有助于中。

来源

2017-09-26 16:20:48

它的工作谢谢你的答案！） – Feruza

不客气，很高兴它帮助 –

你需要用你的a在容器是这样的：

.hvr a:not(:first-child):hover { 
 
    color: #fbad30!important; 
 
}

<div class="hvr"> 
 
<a href="#">Link Text 1</a> 
 
<a href="#">Link Text 2</a> 
 
</div>

来源

2017-09-26 06:14:35 kravisingh

如何：悬停但不是：元素的第一个孩子？

回答

相关问题