该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
描述
使用 :not() 时,有几种不寻常的效果和结果需要注意:
可以使用此伪类编写无用的选择器。例如,:not(*) 匹配任何不是元素的元素,这显然是荒谬的,所以这个附加的规则将永远不被应用。
可以利用这个伪类提高规则的优先级。例如,#foo:not(#bar) 和 #foo 都将匹配相同的元素,但是具有两个 id 的选择器具有更高的优先级。
:not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定;提供与 :not(:is(argument)) 相同的优先级。
:not(.foo) 将匹配任何非 .foo 的元素,包括 和
。这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用,这可能令人惊讶,因为有多种路径
可以选择一个目标元素。例如,body :not(table) a 仍将应用
| 、 | (en-US)、 你可以同时否定多个选择器。例如::not(.foo, .bar) 等同于 :not(.foo):not(.bar)。 如果传递给 :not() 伪类的选择器无效或者浏览器不支持,则整个规则都将是无效的。克服这种行为的有效方式是使用::is 伪类,它接受一个可容错选择器列表。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效,但是 :not(:is(.foo, :invalid-pseudo-class)) 将匹配任何(包括 和 )不是 .foo 的元素。博主附言在joe的主题里看到这个伪类,之前没有接触所以做了个文本的笔记,清理桌面的时候点开看了一下内容,顺手删除后想起来要做个笔记,于是就放在博文里了。 有足够的id和class的时候直接给元素一个专有的名称就可以了,对于typecho这种文章内容部分利用markdown,添加id与class比较困难的,利用这个区分一下原生与含类名的同类元素,多加几个样式还是挺好用的。 移动端可扫我直达哦~ 本文作者:Alphonse 本文链接:Css中的反选伪类“:not()” - https://www.abddb.com/negation_pseudo_class_in_css.html 版权声明:如博文中无特别声明,即为站长原创文章,仅代表个人观点,版权归 小鸟数据 所有,如需转载,烦请注明出处哦! 推荐阅读github项目名称太长被省略的简单解决方法国内成功访问一次github不太容易,偶尔访问成功了,都不舍得关窗口。github上的项目很多时候适配度很广,所以为了区分用途,文件名也会变得很长,而因为css设置单行显示的原因,过长的文件名会被省略,这对需要看名字来区分下载项目的用... 在CSS中排除某个id或类名在 CSS 中,你可以使用 :not() 伪类选择器来排除特定的类名、ID 或其他元素。以下是几种常见的排除方法:排除某个类名/* 选择所有 ul,但不包括 .single-meta 类 */ ul:not(.single-meta)... img插入div容器底部有3px白边现象当盒子容器中中包含img元素时,如果连接区域对比度较高的情况下,会发现父元素的高度比img图片的高度多出3px,容器底部有一条明显的白边。<div> <img src=" "> ... 当网页中有遮罩时,如何禁止背景元素滚动很多自适应的主题,在手机端都是选择把菜单栏隐藏在侧面,按需调用。调用的时候往往页面会显示一个遮罩,屏蔽掉了其他不相关元素的点击,但遮罩上即便设置了overflow属性,也无法阻挡背景body自由翻滚的热情。这个时候可以考虑给body临... 关于css的三维旋转rotateX,rotateY,rotateZ试着写了一个前台登录窗口,想在展示的时候绕x轴以3d旋转的方式出现。旋转效果是实现了,但看着好像没有啥透视效果。记得之前修改wp主题的时候是实现过这个效果的,当真是学如逆水行舟,不进则退...退...退...测试了几个百度搜索到的代码... 站点导航条缩放动画不一致的问题想问导航条增加一个滚动动画,向下滚动一段之后调整导航条高度,结果效果是有了,一看盒子高度先上去了,菜单栏却慢吞吞的隔了很久才到位,像极了工作摸鱼的打工人,盲目的调整了很久,最后发现是各部件动画持续时间不一致的问题。同一个模块中的零件,... 在CSS中的如何进行打印设置之前翻阅wordpress默认主题的时候,看到主题的打印设置占了很大的篇幅,嫌太麻烦所以直接跳过了。这几天想要打印一份博客上的内容,觉得页眉侧栏以及页尾都有点多余,只需要打印博文部分的内容就可以了。于是只能重新去学习关于打印的语法,发... 转载:normalize与css reset的区别以及注释的翻译知乎某回答CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是... css伪类after与before响应hover动作的书写格式用css实现了一个伪类的动画效果,鼠标移到li元素的时候,其伪类后从右至左移动一段距离,实装后效果不是特别好,写完又删除掉了,留个记录,用以备忘。.widget-archive li{ position: relative; ... 浮动阴影-为什么我的css浮动元素总是差那么点意思很多站点都这样的效果,鼠标移上去时对应元素上浮,然后这样的元素往往有一排。博主常见的操作是左右平移几次,然后元素就跟琴键一样依次浮动,看起来非常解压。虽然这个效果有个小小的bug,将鼠标停留在浮动起点与终点的一小块区域,会导致重复触发... ios下safari浏览器hover失效的问题修改主题的时候发现ios下hover子菜单弹出后收不回去,虽然刷新一下页面或者点击一个其他的按钮也能正确关闭,但是始终感觉操作不便。于是安装了一个第三方浏览器(夸克)尝试了一下,第三方浏览器是没有什么问题的,纯属safari的锅。找了... 为博客的logo添加闪光效果的css效果参见本博客左上角logo。 :)#site-banner{ position: relative; overflow:hidden; margin: 0; } #site-banner:before { ... |
|---|

