Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何从此悬停效果中排除列表中的第一个和第三个项目？

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

除了一个说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

并且你会得到相同的结果（假设浏览器没有错误），只要{element}}，伪元素出现在最后（和:after，类型选择器，首先出现。）

按照惯例，大多数作者选择在动态伪类（例如li）之前放置结构伪类，例如:nth-child()。但这完全是个人偏好;它对浏览器没什么影响。

如何将伪元素与伪类组合在一起？

2 个答案: