css中使用:not()选择器为最后一个元素去除边框

2019-04-26107次阅读css

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;
}

 

上一篇: fiddler抓包HTTPS请求  下一篇: 被忽略的逗号操作符  

css中使用:not()选择器为最后一个元素去除边框相关文章