否定伪类:not(s) | CSS-Tricks

栏目: CSS · 发布时间: 6年前

内容简介::not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。在这个例子中,有一个class为“different”的li元素:

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。

:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

在这个例子中,有一个class为“different”的li元素:

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

CSS将会选择除了class为“different”外的所有li元素。

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

可以将伪类选择器应用到所有简单选择器(包括元素类型选择器、通用选择器、属性选择器、类选择器、ID选择器、伪类选择器)上来产生同样的效果。

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

但是如果我们使用伪元素选择器作为参数将不会产生我们预期的效果。

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

否定伪类:not(s) | CSS-Tricks

:not()多种用法可视化表示图

:not()伪类的优先级是其参数的优先级。:not()伪类并不会像其他伪类选择器那样给选择器增加优先级。

否定伪类选择器不支持嵌套,所以:not(:not(...))是永远不被允许的。开发者需要注意伪元素不是简单选择器(simple selector),因此作为:not()伪类的参数是无效的。另外,当使用属性选择器时也需要注意,因为部分属性选择器不被普遍支持。在:not()选择器下链式使用另一个:not()选择器也是禁止的。

学习更多的CSS技术可以关注我的博客: CODECOLOR

否定伪类:not(s) | CSS-Tricks


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP应用开发技术

JSP应用开发技术

柳永坡 / 人民邮电出版社 / 2005-9 / 52.00元

本书全面系统地介绍了JSP应用开发技术,包括JSP预备知识和环境配置、JSP编程基础、JSP应用开发进阶、在JSP中使用数据库、Servlet技术、标签库和表达式语言、Web编程模式和应用框架等几个方面的内容。本书不但由浅入深地介绍了JSP程序设计的原理、方法和技术,还提供了大量的JSP应用开发实例,给出了相应的实用技巧、操作步骤及优化思路。 本书着重于JSP技术的应用性和可操作性,......一起来看看 《JSP应用开发技术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具