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

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

你可以像这样用 :nth-child() 选择器链接 :not() 伪 class。

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

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

Answer 2

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

你可以写任何

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，首先出现）。

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

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

How do I combine pseudo-elements with pseudo-classes?

css

css-selectors

pseudo-class

pseudo-element