wordpress修改个人头像,南昌seo排名优化,房地产网站模版,seo神马网站推广器结构伪类选择器是针对 HTML 层级结构的伪类选择器。
常用的结构化伪类选择器有#xff1a;
:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、
:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择…结构伪类选择器是针对 HTML 层级结构的伪类选择器。
常用的结构化伪类选择器有
:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、
:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、
:empty选择器、:target选择器。
这些基本上都很常用今天着重说下否定伪类:not()
否定伪类特别有用在css中, :not选择器 用于匹配非指定元素/选择器的每个元素,语法格式
:not(selector)比如假设我想选择所有 div除了 id 为 的那个 container。下面代码
div:not(#container) {color: blue;
}否定伪类:not()的几个特点
:not()的优先级是 0因为它的优先级是由括号里面的参数来定的:not()伪类可以同时判断多个选择器比如input:not(:disabled):not(:read-only) {}表示匹配不属于禁用状态同时也不处于只读状态的 input 元素not()支持多个表达式比如.cs-li:not(li, dd) {}还有另外一种写法.cs-li:not(li):not(dd) {}。但是这两种写法要考虑兼容性问题:not()也支持选择符比如input:not(.a .b) { border: red solid; };
今天遇到一个问题想把首页除了logo之外的其他元素变黑白但是用否定伪类却出现很奇怪的问题其他有部分元素还是彩色的代码如下
.home div:not(.logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale1); _filter:none; filter: gray;
}然后改为效果一样
.home div:not(.header .logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale1); _filter:none; filter: gray;
}后来换成另一种写法却可以代码如下
.home div:not(.header):not(.logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale1); _filter:none; filter: gray;
}后来试验了一下多少层级关系就要写多少个:not()例如
div classheaderdiv classboxdiv classlogo/div/div
/div就要写为
.home div:not(.header):not(.box):not(.logo)
