css - 如何将伪元素与伪类结合起来？

Question

如何将 :after 等伪元素与 :hover 和 :not 等伪类结合起来？

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:hover:after {
  width: 100%;
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>

例如，如何从悬停效果中排除列表中的第一项和第三项？

Answer 1

除了一条规则 there can only be one pseudo-element per complex selector and it must appear at the very end 之外，没有关于组合伪类和伪元素的特殊规则。 .伪类可以按任何顺序编写——简单选择器的顺序不会改变复合选择器的含义。请注意，与伪类不同，伪元素不是简单的选择器。

你可以写任何

li:not(:nth-child(1)):not(:nth-child(3)):hover:after

或

li:hover:not(:nth-child(1)):not(:nth-child(3)):after

或

li:hover:not(:nth-child(3)):not(:nth-child(1)):after

或者，哎呀，甚至

li:not(:nth-child(3)):hover:not(:nth-child(1)):after

只要伪元素 :after 出现在最后(和 li ，类型选择器，首先出现)。

按照惯例，大多数作者选择将结构伪类(例如:nth-child())放在动态伪类(例如:hover)之前。但这完全是个人喜好；对浏览器来说无关紧要。