Question

我试图摆脱悬停的元素的第一个孩子，但没有提前。请帮助我。这段代码我试图调整，但无望。

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;
        }
      }

    }
  }

Answer 1

感谢您发布代码，理想的交易将是使用像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

希望这有帮助。

Answer 2

您需要将a包装在这样的容器中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: