CSS选择器链或组中出现无效的伪选择器会怎样

2019-07-1245次阅读css

::butt是一个无效的伪选择器,先看看没有使用组选择器时是啥样的:

div{
  border: 2px dashed black;
}

span::butt{
  border: 2px dashed black;
}

嗯,不会影响到div元素的样式,这个地球人都知道。

如果是在选择器链或组中出现无效的伪选择器会怎样

div,span::butt{
  border: 2px dashed black;
}

可以看出整个选择器都无效 - 页面上的div和span元素都不会出现虚线框。

这样就可以解释通为什么有些情况下不能通过选择器链或组来实现避免多次的重复定义样式,例如:

::selection{
  background: lightblue;
}

::-moz-selection{
  background: lightblue;
}

很长一段时间,Firefox不识别此选择器,使用时需要添加一个供应商前缀(::-moz-selection)来获得相同的效果(在Firefox 62+已修复)。如果在选择器链或组中出现::-moz-selection,对于那些不识别此伪元素的浏览器则会使整个选择器列表无效。

还好,浏览器已经意识到这个问题,引用MDN文档中这段话:

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

再次强调要具备两个条件:

  1. ::伪元素;

  2. 具有-webkit-前缀;

关于浏览器内核不了解的可以看这里

栗子收尾:

div,span::-webkit-butts {
  border: 2px dashed black;
}

上一篇: 如何实现JS数组去重  下一篇: 防抖函数与节流函数的区别  

CSS选择器链或组中出现无效的伪选择器会怎样相关文章