Html 如何在第n个子项上隐藏转换

我应用了到“ul>li>a”的转换，我想关闭最后一个孩子（第四个）的转换。简单地说，我不希望“接触”受到过渡的影响

有什么想法吗？我试图触发到类的转换，但没有成功

干杯

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

.main header>ul>li>a{
位置：相对位置；
}
.main header>ul>li>a:之前{
内容：“；
位置：绝对位置；
宽度：50%；
高度：1px；
底部：0；
左：25%；
背景色：#868686；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.main header>ul>li>a：悬停：之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.main header>ul>li:n个子项（4）{
转换：无；更改：

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

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

至：

.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{
位置：相对位置；
文字装饰：无；
}
.main header>ul>li>a:之前{
内容：“；
位置：绝对位置；
宽度：50%；
高度：1px；
底部：0；
左：25%；
背景色：#868686；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.main header>ul>li>a：悬停：之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.main header>ul>li:n子级（4）>a:before{
内容：无；
}







使用
not（）
选择器从
悬停
状态删除
第n个子项（4）
：


.main header>ul>li>a{
位置：相对位置；
文字装饰：无；
}
.main header>ul>li>a:之前{
内容：“；
位置：绝对位置；
宽度：50%；
高度：1px；
底部：0；
左：25%；
背景色：#868686；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
.main header>ul>li:not（：n个子项（4））>a:hover:before{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}







转换只影响更改应用于元素的方式，而不影响这些更改本身。此外，您将转换放置在不同的元素上，而不是放置在
transition:none；
.main header>ul>li:last child a:hover:：before{transition:none；}
将是您想要尝试的。我根本不希望下划线转换影响到第四个孩子您的意思是您不想在最后一个孩子的下划线下？@TemaniAfif YesIt将连接部分分开的良好做法（
+
，
~
，
）使用空格的选择器。除了在代码中有一个选择器如
.main header>ul>li:not（：nth child（4））>a:hover:before
这一事实之外，清楚地表明您做错了。