:not伪元素不兼容

244 阅读2分钟

使用伪元素发现在部分移动端机型中,存在一些差异化比较严重的兼容性,因此本文记录:not的一些注意事项

1、兼容性现象

  • 使用同时否定多个选择器。例如:.gamebox[css-gamebox]>div:not(:first-of-type,:nth-last-of-type(2),:last-of-type)  在pc端和版本比较高的移动端,页面展示是没问题,如图所示

image.png

然而在一些移动端机型比较低的情况,出现另外一种中间内容消失的现象

image.png

初步怀疑,是该内容高度被失效了,最后检查是因为:not兼容性导致的

2、:not的兼容性

image.png

同时使用多个选择器,在移动中各个浏览器的版本,需要的版本都是有些偏高,因此需要更改为,更多版本兼容的写法

.gamebox[css-gamebox]>div:not(:first-of-type):not(:nth-last-of-type(2)):not(:last-of-type) 

3、:not中独特现象

  • 可以使用这个伪类写完全无用的选择器。例如,:not(*) 匹配任何不是元素的元素,这显然是荒谬的,所以这个附加的规则将永远不被应用。
  • 可以利用这个伪类提高规则的优先级。例如,#foo:not(#bar) 和 #foo 都将匹配相同的元素,但是具有两个 id 的选择器具有更高的优先级。
  • :not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定;提供与 :not(:is(argument)) 相同的优先级。
  • :not(.foo) 将匹配任何非 .foo 的元素,包括 <html> 和 <body>
  • 这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用,这可能令人惊讶,因为有多种路径可以选择一个目标元素。例如,body :not(table) a 仍将应用 <table> 中的链接,因为 <tr><tbody> (en-US)<th><td><caption> 等都可以匹配选择器 :not(table) 部分。
  • 你可以同时否定多个选择器。例如::not(.foo, .bar) 等同于 :not(.foo):not(.bar)
  • 如果传递给 :not() 伪类的选择器无效或者浏览器不支持,则整个规则都将是无效的。克服这种行为的有效方式是使用::is 伪类,它可以接受有错的选择器列表。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效,但是 :is(:not(.foo), :not(:invalid-pseudo-class)) 将匹配任何不是 .foo 的元素。

4、 参考

not伪元素

CSS :not伪类可能错误的认识

:not()伪类选择器已支持复杂参数