css 如何：hover but：not for：first-child of element？

r7knjye2 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(138)

我试图摆脱悬停的第一个孩子的一个元素，但没有先进的。请你帮我一下。我试图调整这个代码，但毫无希望。

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

    }
  }

css

来源：https://stackoverflow.com/questions/46418648/how-to-hover-but-not-for-first-child-of-element

3条答案

按热度按时间

hujrc8aj1#

感谢您发布代码，理想的选择是使用外部网站，如codepen.io;对我们来说，阅读输出代码比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
现在，对代码的其他注解：

如果你想让一个链接有padding（或margin），你需要使用display: inline-block（或block）。
我建议您不要过度使用!important

赞(0）回复(0）举报 2023-05-08

oug3syen2#

你需要将a Package 在一个容器中，像这样：

.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>

赞(0）回复(0）举报 2023-05-08

mrfwxfqh3#

not（：last-child）a：hover如果它是一个像ul li a这样的选项，那么在css中使用它而不使用“.”
nav li a：not（：last-child）a：hover，
nav，如果它在nav或div类中。

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何：hover but：not for：first-child of element？

3条答案

相关问题

热门标签

最新问答