html - 如何 - 第 n 个子级的隐藏转换

Question

我应用了过渡到“ul > li > a”，我想关闭最后一个 child (第四个)的过渡。简而言之，我不希望“联系”受到过渡的影响

有什么想法吗？我尝试触发到一个类的转换，但它不起作用。

干杯

HTML

<header id="header" class="main-header">
    <h1 class="name"><a href="#">Company</a></h1>
    <ul class="main-nav">
        <li><a class="button-menu" href="#header">About Us</a></li>
        <li><a class="button-menu" href="#products">Products</a></li>
        <li><a class="button-menu" href="#business">Our Business</a></li>
        <li><a class="button-menu contact-border" href="#contact">Contact</a></li>
    </ul>
</header>

CSS

.main-header > ul > li > a {
    position: relative;
}

.main-header > ul > li > a:before {
      content: "";
      position: absolute;
      width: 50%;
      height: 1px;
      bottom: 0;
      left: 25%;
      background-color: #868686;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

.main-header > ul > li > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

.main-header > ul > li:nth-child(4) {
  transition: none; <--???
}

Answer 1

使用 not() 选择器将 nth-child(4) 从 hover 状态中移除:

.main-header>ul>li>a {
  position: relative;
  text-decoration:none;
}

.main-header>ul>li>a:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  bottom: 0;
  left: 25%;
  background-color: #868686;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.main-header>ul>li:not(:nth-child(4))>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<header id="header" class="main-header">
  <h1 class="name"><a href="#">Company</a></h1>
  <ul class="main-nav">
    <li><a class="button-menu" href="#header">About Us</a></li>
    <li><a class="button-menu" href="#products">Products</a></li>
    <li><a class="button-menu" href="#business">Our Business</a></li>
    <li><a class="button-menu contact-border" href="#contact">Contact</a></li>
  </ul>
</header>