CSS 否定伪类,:not(X),是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。
:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级。
:not() 伪类可以将一个或多个以逗号分隔的选择器作为其参数(实验性的,尚未广泛支持,目前Safari、IOS Safari支持)。选择器中不得包含另一个否定选择符或伪元素。
浏览器兼容:IE9+、移动端全兼容。
:not()选择器为最后一个元素去除边框
平时我们先为元素添加边框
/* 添加边框 */
.nav li {
border-right: 1px solid #666;
}
为最后一个元素去除边框
/* 去掉边框 */
.nav li:last-child {
border-right: none;
}
不过不要这么做,使用 :not() 伪类来达到同样的效果:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
CSS选择器以人类描述它的方式定义边界。
:not()选择器使列表的每项都由逗号分隔
ul > li:not(:last-child)::after {
content: ",";
}
:not()选择器结合nth-child可以选择1至n个元素
/* 选择除前3个之外的所有项目,并显示它们 */
li:not(:nth-child(-n+3)) {
display: none;
}
:not()选择器隐藏没有静音、自动播放的影片
这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音,则不显示视频:
video[autoplay]:not([muted]) {
display: none;
}