使用伪元素发现在部分移动端机型中,存在一些差异化比较严重的兼容性,因此本文记录:not的一些注意事项
1、兼容性现象
- 使用同时否定多个选择器。例如:
.gamebox[css-gamebox]>div:not(:first-of-type,:nth-last-of-type(2),:last-of-type)
在pc端和版本比较高的移动端,页面展示是没问题,如图所示
然而在一些移动端机型比较低的情况,出现另外一种中间内容消失的现象
初步怀疑,是该内容高度被失效了,最后检查是因为:not兼容性导致的
2、:not的兼容性
同时使用多个选择器,在移动中各个浏览器的版本,需要的版本都是有些偏高,因此需要更改为,更多版本兼容的写法
.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
的元素。