如何 - nth-child 上的隐藏过渡

Question

我将转换应用到 "ul > li > a"，我想关闭最后一个 child（第 4 个）的转换。简单地说，我不希望 "contact" 受到过渡

的影响

有什么想法吗？我试图触发到 class 的转换，但它不起作用。

干杯

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

变化：

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

收件人：

.main-header > ul > li:nth-child(4) > a:before { content: none; }

.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 > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

.main-header > ul > li:nth-child(4) > a:before {
  content: none;
}

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

Answer 2

使用 not() 选择器从 hover 状态中删除 nth-child(4)：

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

如何 - nth-child 上的隐藏过渡

How to - Hidden transition on nth-child

html

css

transition