首页>建站相关>Css中的反选伪类“:not()”

Css中的反选伪类“:not()”

该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。

描述

使用 :not() 时,有几种不寻常的效果和结果需要注意:

可以使用此伪类编写无用的选择器。例如,:not(*) 匹配任何不是元素的元素,这显然是荒谬的,所以这个附加的规则将永远不被应用。

可以利用这个伪类提高规则的优先级。例如,#foo:not(#bar) 和 #foo 都将匹配相同的元素,但是具有两个 id 的选择器具有更高的优先级。

:not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定;提供与 :not(:is(argument)) 相同的优先级。

:not(.foo) 将匹配任何非 .foo 的元素,包括 <html> 和 <body>。

这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用,这可能令人惊讶,因为有多种路径
可以选择一个目标元素。例如,body :not(table) a 仍将应用 <table> 中的链接,因为 <tr>、<tbody>、<th>、<td> (en-US)、<caption> 等都可以匹配选择器 :not(table) 部分。

你可以同时否定多个选择器。例如::not(.foo, .bar) 等同于 :not(.foo):not(.bar)。

如果传递给 :not() 伪类的选择器无效或者浏览器不支持,则整个规则都将是无效的。克服这种行为的有效方式是使用::is 伪类,它接受一个可容错选择器列表。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效,但是 :not(:is(.foo, :invalid-pseudo-class)) 将匹配任何(包括 <html> 和 <body>)不是 .foo 的元素。

博主附言

在joe的主题里看到这个伪类,之前没有接触所以做了个文本的笔记,清理桌面的时候点开看了一下内容,顺手删除后想起来要做个笔记,于是就放在博文里了。

.single a:not([class]){
    color:#e91e63;
}

有足够的id和class的时候直接给元素一个专有的名称就可以了,对于typecho这种文章内容部分利用markdown,添加id与class比较困难的,利用这个区分一下原生与含类名的同类元素,多加几个样式还是挺好用的。

标签: css

移动端可扫我直达哦~

推荐阅读

css 2023-09-06

浮动阴影-为什么我的css浮动元素总是差那么点意思

很多站点都这样的效果,鼠标移上去时对应元素上浮,然后这样的元素往往有一排。博主常见的操作是左右平移几次,然后元素就跟琴键一样依次浮动,看起来非常解压。虽然这个效果有个小小的bug,将鼠标停留在浮动起点与终点的一小块区域,会导致重复触发...

建站相关 css

css 2023-09-04

ios下safari浏览器hover失效的问题

修改主题的时候发现ios下hover子菜单弹出后收不回去,虽然刷新一下页面或者点击一个其他的按钮也能正确关闭,但是始终感觉操作不便。于是安装了一个第三方浏览器(夸克)尝试了一下,第三方浏览器是没有什么问题的,纯属safari的锅。找了...

建站相关 css

css 2023-05-25

如何用css实现一个导航条的logo

浏览网络的时候看见某个站点的导航条菜单图标很有意思,导航条logo一般都是3条横杠,该站点的其中一条横杠是略短的,鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果,考虑将其放入正在修改的wordpress主题当中,先记录一下...

建站相关 css

css 2023-05-21

一套纯css实现的图标库-ICONO

网络上有很多免费的图标库,比如fontawesome,比如typicons,利用一些小图标来代替呆板的文字描述,可以让页面显得更为简洁而生动。这类图标库也有一些美中不足之处,比如在不同分辨率下,可能产生边缘的锯齿,也可能会有部分几个图...

建站相关 css

css 2023-05-15

text-transform属性控制文本的大小写

看范例站点的css代码,发现这么一条,之前没有接触过这个属性,先就text-transform做个笔记。这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定...

建站相关 css

css 2022-12-01

利用css整站加灰色遮罩实现全站变灰

遇到举国同悲的日子,大部分站点会将原本五颜六色的画面呈现为黑白,用黑白的色调,表达对伟人的追思,为逝去的英雄送行。用css就可以很方便的实现全站变灰的效果。外部样式目前绝大多数站点都采用了引用外部css文件的方式,对于这类站点,只需要...

建站相关 css

css 2022-11-25

利用ul+css实现一个分页效果

尝试自定义了一个wordpress的后台设置页面,仅仅是添加了表单,暂时没有写css效果,分页器的页面展现是这样的,想用ul+css实现图片下方这样的效果。为ul添加一个flex属性,可以很方便的让其中包含的li元素排列为一行,为li...

建站相关 css

css 2022-11-05

css中hover悬停动作的行内写法

开通了一个淘宝店铺,觉得页面有点单调,想要添加一些圆角啊悬停变化之类的css效果。淘宝的店招以及导航条可以有限的使用css,而其他模块css功能是需要另行付费的,一年的使用价格是2400元。对于一个营收尚未过千的小店来说,这个价格有点...

建站相关 css

css 2022-10-13

css中的box-sizing属性

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素...

建站相关 css