CSS3新特性(07):选择器

2016/10/26 727
目录
[隐藏]

因为要考虑浏览器兼容性问题,所以刚出来新鲜可口的选择器我都不太会去用,所以导致写程序时,会用的选择器就这么几种最最常规的,为了技术精进,于是乎,我整理了所有我不常用的选择器,以后想起来要用,查这篇文章就可以啦,我常用的选择器也就标签、id、class这么实在可怜的几种,所以别个不熟的都记录在下面啦。

选择器

属性选择器

1、[att]

浏览器兼容性:IE7及以上。
2、[att=val]

注:其实ID选择器也可以写出这种属性选择器的样子。比如像下面这样

浏览器兼容性:IE7及以上。
3、[att~=val]

如何选中标题和内容呢,就用这个

注:其实class选择器也可以写出这种属性选择器的样子。

浏览器兼容性:IE7及以上。
4、[att|=val]

如何选中lang=en\en-us\en-au的p呢,用这个,这个写法不常用,一般会在lang属性中使用的比较多。

浏览器兼容性:IE7及以上。
5、[att^=val] 如何选中href中带#的页面内的超链接呢,用这个。

浏览器兼容性:IE7及以上。
6、[att$=val]以val属性值为结尾的属性

浏览器兼容性:IE7及以上。
7、[att*=val]包含了val属性值的属性,比如选中超链接中包含http://lady.163.com的就可以用这个

浏览器兼容性:IE7及以上。

伪类选择器

1、a:link;a:visited;a:hover;a:active;设置超链接的选择器,四个配在一起使用,注意一定要这个顺序的哟!

浏览器兼容性:IE8及以上。
2、:enabled 定义可用的状态\:disabled 定义不可用的状态\:checked 定义选中的状态

浏览器兼容性:IE9及以上。
3、:first-child\:last-child以及:nth-child(even)

另外:nth-child(even)的变体可以这样写:nth-child(3n+1)。
浏览器兼容性:IE9及以上。
4、:only-child选中元素底下只有一个子元素的项

浏览器兼容性:IE9及以上。
5、:first-of-type\:last-of-type\:nth-of-type(even)\:nth-last-of-type(2n)

浏览器兼容性:IE9及以上。
6、:only-of-type

浏览器兼容性:IE9及以上。
7、:empty,可以选中比如下面那个空的p标签。

浏览器兼容性:IE9及以上。
8、:root ,它选中的就是这个根标签。
浏览器兼容性:IE9及以上。
9、:not()\:target\:lang()

伪元素选择器

浏览器兼容性:IE9及以上。

组合选择器

有后代选择器、子选择器、和兄弟选择器。

选择器优先级

行内样式:a
ID选择器的数量:b
类、伪类、属性选择器的数量:c
标签选择器和伪元素选择器的数量:d
a,b,c,d分别给1000,100,10,1的级别值

所以选择器的最终值value=ax1000+bx100+cx10+dx1

举个栗子

选择器 a b c d value
h1 0 0 0 1 1
p>em 0 0 0 2 2
style=”” 1 0 0 0 1000
.nav p 0 0 1 1 11
div #nav 0 1 0 1 101
a:link 0 0 1 1 11

样式根据选择器优先级别呈现,优先级别高的会覆盖优先级别低的,同级别的按照css书写的顺序,先写的会被后写的覆盖。

而样式里的属性,不同的属性会合并,同样的属性会根据优先级规则以及书写规则进行覆盖。

分享本文: