如何将伪元素与伪类组合？

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

您可以像这样: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>

Answer 2

关于组合伪类和伪元素没有特殊规则,除了一条规则说每个复杂选择器只能有一个伪元素,它必须出现在最后.伪类可以按任何顺序编写 - 简单选择器的顺序不会改变复合选择器的含义.请注意,与伪类不同,伪元素不是简单的选择器.

你可以写任何一个

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.但这完全是个人偏好; 它与浏览器无关.