CSS选择器
2013-04-10 09:57
232 查看
CSS1选择器
选择器 | 解释 | 说明 |
E | 类型选择器 | 选择指定类型的元素(指定标签) |
E#myid | ID选择器 | id等于myid的E元素,E若省略则表示id等于myid的任意元素 |
E.class | 类选择器 | 所有class等于指定class的E元素.若E省略E的用处同上 |
E F | 包含选择器 | 选择包含在E元素中的F元素.E和F可以是其它选择器,如:E.abc F.cde |
a:link | 链接伪类 | 匹配已定义了href属性的a元素 |
a:visited | 链接伪类 | 匹配已访问过的a元素 |
E:active | 用户操作伪类 | 选择被激过的E元素,如被鼠标按住 |
E:hover | 用户操作伪类 | 正被鼠标经过的E元素 |
E:focus | 伪选择器 | 匹配获得焦点的E元素 |
E::first-line | 伪选择器 | E元素内的第一行文本 |
E::first-letter | 伪选择器 | 匹配E元素内的第一个字符 |
CSS2选择器
选择器 | 解释 | 说明 |
* | 通配选择器 | 选择文档中所有的元素 |
E[foo] | 属性选择器 | 匹配E元素,且它定义了foo属性,若E省略,则表示所有定义了foo属性的任意元素 |
E[foo=”bar”] | 属性选择器 | 匹配E元素,且它定义了foo属性,且值是bar,E省略的情况同上 |
E[foo~=”bar”] | 属性选择器 | 匹配E元素,且它的foo属性中有bar,如:<a title=”bar bar1 bar2”></a>将被a[title~=”bar”]匹配. |
E[foo|=”en”] | 属性选择器 | 匹配E元素,且它的foo属性用 - 分隔,且值开头是en.如:<a title=”en-us”></a>被a[title|=”en”]匹配 |
E:first-child | 结构伪类选择 | 匹配E元素,且它是父元素的第一个子元素. |
E:lang(fr) | 伪类选择器 | 匹配E元素,且该元素显示内容的语言类型是fr |
E::before | 伪元素选择器 | 匹配E元素前的内容 |
E::after | 伪元素选择器 | 匹配E元素后的内容 |
E>F | 子包含选择器 | 匹配F元素,且该元素为所匹配E的元素的子元素. |
E+F | 相邻兄弟选择器 | 匹配F元素,且它在E后 |
CSS3选择器
属性选择器
选择器 | 解释 | 说明 |
E[foo^=”bar”] | 匹配E元素,且定义了foo属性,属性值前缀为bar | |
E[foo$=”bar”] | 匹配E元素,定义了foo属性,值后缀为bar | |
E[foo*=”bar”] | 匹配E元素,定义了foo属性,属性包含bar |
浏览器兼容性
IE | Firefox | Opera | Safari | Chrome |
IE7及以上 | 1.5及以上 | 9.0及以上 | 3.1及以上 | 1.0及以上 |
应用实例
百度文库中,各类型的文档前有不同图标,如word文档前面是word图标,pdf文档前面是pdf的图标,txt是文本文档的图标.通常情况下,我们是为在后台程序生成html时在程序中根据文本的类型为各文件的链接加上class属性,并设置相应的值,然后在CSS中为各class设置相应的背景图片.但在CSS3中不需要如此.根据上面的属性选择器,我们可以通过判断各链接的href属性值的结果几个字母,借此来判断各文档的类型,然后加上对应的样式,如:a[href^=”http:”]{
padding-left:18px;
}
a[href$=”pdf”]{
background:url(../images/icon_pdf.gif) no-repeat left 50%;
}
a[href$=”ppt”]{
background:url(../images/icon_ppt.gif) no-repeat left 50%;
}
结构伪选择器
顾名思议,结构伪类选择器是利用DOM实现元素过滤,也就是说它是通过文档结构之间的相互关系来进行匹配,从而减少文档内对class和平ID的定义.选择器 | 说明 |
E:root | 匹配E所在文档的根元素.在html文档中,根元素就是html 标签. |
E:nth-child(n) | 找出E元素,且它是你北朝鲜绵第n个子元素.n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如: tr:nth-child(3)匹配所有表格里第3行的tr tr:nth-child(2n+1)匹配所有表格的奇数行 tr:nth-child(2n)匹配所有的偶数行 tr:nth-child(odd)匹配所有的奇数行 tr:nth-child(even)匹配所有的偶数行 |
E:nth-last-child(n) | 选择E元素,且它是父元素的倒数第n个子元素 |
E:nth-of-type(n) | 选择E元素,且它是父元素所有子元素中类型为E的子元素集合中的第n个,n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如p:nth-of-type(2)匹配出,<div><h1></h1><p></p><p></p></div>中第二个p元素 |
E:nth-last-of-type(n) | 选择E元素,且它是父元素的倒数第n个子节点 |
E:last-child | 找出E元素,且它是父元素中的最后一个字节点 |
E:first-of-tpe | 找出E元素,且它是父元素中是第一个该类型的元素,如p:first-of-type匹配<div><p></p><p></p>中的第一个p元素. |
E:last-of-type | 找出E元素,且它是父元素中的最后一个该类型的元素.如:p:last-of-type匹配,<div><p></p><p></p></div>中的最后一个p元素,它同E:nth-last-of-tpe(1)意义相同 |
E:only-child | 找出父元素中只包括一个的子元素,且该元素是E |
E:only-of-type | 选择其父元素只包含一个同类型的子元素,且该子元素匹配E.如p:only-of-type匹配<div><p></p></div>中的p,因为div中只包括一个p元素 |
E:empty | 匹配E元素,且该元素不包含子节点,注意,文字也属于节点 |
浏览器兼容性
IE | Firefox | Opera | Safari | Chrome |
IE9及以上 | 3.5及以上 | 9.6及以上 | 3.1及以上 | 1.0及以上 |
应用实例
表格中行之间用不同颜色区分开.目前我们大多是在程序生成html时用个自增数除2取余,以此来判断是奇数行还是偶数行,然后赋给该行tr不同的class名,然后在CSS中定义不同的背景.有了上面的选择器后,实现上此功能就简单的多,tr上不用加任何class属性.只需要在CSS中如下设定:table{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
}
tr:nth-child(even){
background:#f5fafe;
}
tr:nth-child(odd){
background:#191970;
}
其它应用环境:
1. WEB页面上摆出保龄球,通过数学公式选中对应的球来控制其显示位置
2. 新闻列表中可以找出第一,二,三个子元素对它加上特殊的背景以示特殊.甚至可以为每条都加上背景,如第一条加上上面有数字1的图片,第二个加上2.等等.
元素伪类选择器
选择器 | 说明 |
E:enabled | 选择E元素,且它是可用的UI元素.通常用在表单中的控制.所以被设为disabled的元素不会被匹配出来. |
E:disabled | 选择E元素,且它是不可用的,和上面的相反 |
E:checked | 选择被勾选的E元素,通常指checkbox,radio |
浏览器兼容性
IE | Firefox | Opera | Safari | Chrome |
IE9及以上 | 1.5及以上 | 9.0及以上 | 3.1及以上 | 1.0及以上 |
其它选择器
选择器 | 说明 |
E~F | 兄弟元素选择器.选择匹配F的所有元素,且匹配元素位于匹配E的后面.所以E和F在同一级上,是兄弟关系.如:div~p匹配,<div><p>1</p></div><div><p>2</p></div><p>3</p>中的<p>3</p>.其它两个p元素不会被匹配出来 |
E:not(s) | 否定选择器.匹配所有E元素,且不满足s选择器.如: div p:not(.red)匹配div中的p元素,且p元素的class不是red |
E:target | 目标选择器.匹配所有E元素,且被相关URL指向.如在浏览器后加上#red.(文档中有个元素的id是red),则这时候它被匹配出来了. |
浏览器兼容性
IE | Firefox | Opera | Safari | Chrome | |
E ~ F | IE7及以上 | 1.5及以上 | 9.0及以上 | 3.1及以上 | 1.0及以上 |
E:not(s) | IE9及以上 | 3.0及以上 | 9.6及以上 | 3.1及以上 | 1.0及以上 |
E:target | IE9及以上 | 1.5及以上 | 9.6及以上 | 3.1及以上 | 1.0及以上 |
相关文章推荐
- css选择器
- IE7对css选择器的改进
- CSS选择器笔记
- CSS选择器的权重详解
- jquery 导航条的效果(css选择器控制)
- 浅谈CSS选择器中的空格
- jquery之选择将被操作的元素(CSS选择器)
- CSS选择器
- CSS选择器.aa.bb类型在IE6下的Bug
- 远离JS灾难css灾难之 js私有函数和css选择器作为容器
- Jquery之CSS选择器
- CSS选择器(中)——高级选择器
- css选择器
- jQuery所支持的基本CSS选择器
- CSS选择器
- 分享5个有帮助的CSS选择器
- DIV+CSS基础教程:盒模型、块状元素与内联元素、CSS选择器
- flex4.5中CSS选择器的应用小结
- 牢记31种CSS选择器
- CSS选择器、优先级与匹配原理