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

【问题标题】：How do I combine pseudo-elements with pseudo-classes?如何将伪元素与伪类结合起来？
【发布时间】：2017-01-22 17:57:34
【问题描述】：

如何将: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>

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

【问题讨论】：

像往常一样合并...

标签： css css-selectors pseudo-element pseudo-class

【解决方案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）之前。但这完全是个人喜好；对浏览器没有影响。

【讨论】：

【解决方案2】：

您可以像这样将:not() 伪类与:nth-child() 选择器链接起来。

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>

【讨论】：