链接 a:not(x)::before 选择器

Question

我有一个带有 CSS 动画链接的导航（在元素顶部画一条线）

a, a.nav-link{
    text-decoration: none;
    color: #594922;
}
a.nav-link:hover{
    color: #4dd897 
}
a.nav-link::before{
    content: '';
    height: 1px;
    background: #594922;
    display: block;
    transform: scale(0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
a.nav-link:hover::before {
  transform-origin: right top;
  transform: scale(1, 1)
}

<ul>
  <li>
    <a class="nav-link">abcde</a>
  </li>
  <li>
    <a class="nav-link">b</a>
  </li>
  <li>
    <a class="nav-link">c</a>
  </li>
</ul>

我现在要做的是忽略第一个链接上的动画，我尝试添加 :not(:first-of-type) 但它破坏了整个动画

a, a.nav-link{
    text-decoration: none;
    color: #594922;
}
a.nav-link:hover{
    color: #4dd897 
}
a.nav-link:not(:first-of-type)::before{
    content: '';
    height: 1px;
    background: #594922;
    display: block;
    transform: scale(0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
a.nav-link:hover::before {
  transform-origin: right top;
  transform: scale(1, 1)
}

<ul>
  <li>
    <a class="nav-link">abcde</a>
  </li>
  <li>
    <a class="nav-link">b</a>
  </li>
  <li>
    <a class="nav-link">c</a>
  </li>
</ul>

感谢您的帮助，谢谢

Answer 1

您需要选择不是第一个的每个 li 元素并将样式应用于其中的导航链接。只需将 li:not(:first-of-type) 放在您的 CSS 选择器前面，如下所示。你也可以使用 li:not(:first-child)。原因是“a”元素不是彼此的兄弟，它们被包裹在 li 元素中。 li 元素是彼此的兄弟，因此当您将 :first-of-type 放在 a 元素上时，它始终只是 li 内部的一个元素，这就是为什么它会为所有元素移除它，而不仅仅是第一个一个。

li:not(:first-of-type) a.nav-link::before{
content: '';
height: 1px;
background: #594922;
display: block;
transform: scale(0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1)}

li:not(:first-of-type) a.nav-link:hover::before {transform-origin: right top;transform: scale(1, 1)}