(转)css4 选择器

原文地址

CSS4选择器工作草案于2011年9月29日被发布。 新增了一些内容，我们来看看是哪些：

一.复合选择器

1.E:not(s1, s2)
匹配所有既不包含s1选择器也不包含s2选择器的元素。是的，这个只是将css3的E:not(s)中1个参数变成2个，谁又会说这不是发展呢。
例如*not（input，button）表示除input以及button外的所有元素

2.E:matches(s1, s2)
匹配s1和s2选择器的元素

?

1 2	a：matches(:link,:hover){...}/*定义a：link与a：hover时的样式*/ label:matches(:hover, :focus) /for/ input{...}/*定义input当其label滑过和获得焦点时的样式,"//"用法下面会有介绍*/

需要注意的的是只有comopund selectors才可以应用E:matches（）,另外不允许嵌套，像:matches(:matches(…))和:not(:matches(…))都是不对的，对于compound selectors的定义搞的不是很清楚，理解透彻的人可以分享下。

按常理推算参数可以大于2个，像E:not(s1,s2,s3..),E:mathches(s1,s2,s3…),草案中并没有提到这点。

二.本地链接伪类 E:local-link

匹配url与选择器匹配的链接。

?

1	nav :local-link { text-decoration: underline; }

这个规则将会使nav包含的链接中，url与当前文档一致的都有下划线。

也可以有参数，格式是这样：E:local-link（n），注：n代表链接匹配URI的目录级数，n>0。
css：

?

1 2 3 4 5

a:local-link {...} a:local-link(0) {...} a:local-link(1) {...} a:local-link(2) {...} a:local-link(2) {...}

html：

?

1 2 3 4 5

<a href="http://www.wheattime.com">Home</a> <a href="http://www.wheattime.com/2011">2011</a> <a href="https://www.wheattime.com/2011/03">March</a> <a href="http://www.wheattime.com/2011/03/">March</a> <a href="http://wheattime.com/2011/03">March</a>

如果当前文档的URI（统一资源标志符）:http://www.wheattime.com/2011/03/,
则：
第一个链接将接收样式2；
第一个链接将接收样式2,3；
第三个链接将接收样式2,3,4；
第四个链接将接收样式1；
第五个链接将没有样式。

三.时间选择器

1.E:current

?

1	:current(p, li, dt, dd) {background: yellow}/*时间内的元素背景将会是黄色*/

2.E:past
表示优先与：current前完全出现的元素，如果一个以时间排序的元素不是以文档语言来定义，那么表示：current的上一个（也许是间接的）节点

3.E:future
表示延迟与：current前完全出现的元素，如果一个以时间排序的元素不是以文档语言来定义，那么表示：current的下一个（也许是间接的）节点

三.状态选择器
E:indeterminate
不确定值选择器,此用于元素的UI不确定状态，例如radio与checkbox可在checked和unchecked状态间切换，但却没有不确定状态。

四.网格结构选择器

1.E:nth-match(n of selector)
2.E:column(selector)

五.ID属性选择器

E /foo/ F
匹配的是这样的F元素，它的ID值与E元素的foo属性值相等。

?

1	label:matches(:hover, :focus) /for/ input{...} /* 样式将作用于下面的input上 */

?

1	<label for="maishi">麦时<input type="input" id="maishi" /></label>

六.指定元素选择器

$E > F
匹配包含F子元素的父元素。

?

1	$ul>li{color:#000;}/*样式作用在ul上*/

参考资料：
Selectors Level 4-W3C Working Draft 29 September 2011

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码