CSS3选择符语法概览
时间:2009-02-18 来源:未知 作者:未知 点击数:71
CSS3选择符语法概览

CSS3选择符浏览器兼容表
子串匹配的属性选择符——
这一组的选择符都新加的,他允许开发者对属性中的子字符串来进行匹配。通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。
目标伪类——
含有识别标识的url(一个#后面紧跟锚点名称或者元素的id)指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识,:target伪类将不会匹配任何元素。
UI元素状态伪类——
:ENABLED伪类和:DISABLED伪类
在浏览器允许改变表单控件外观的前提下,:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素(表单元素)的显示样式。
:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。
结构性伪类——
结构性伪类允许开发者根据文档树中表明的结构来指定元素,而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大,但是不幸的是现代浏览器仅提供了有限的支持。
:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中,文档的根元素始终是HTML,也就是说现在的两条规则其实是一样的(大体上说来:root要比html更专业点)。
:NTH-CHILD()伪类
:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数,可以是一个数字,也可以一个关键字或者一个公式。数字b指是的第b个子元素。关键字odd(奇数)和even(偶数)可以用来匹配序号为奇数或者是偶数的子元素。表达式an+b可以用来创建更加复杂的循环模式。在表达式中,a代表步长,n是一个从0开始的计数器,b代表偏移量。其中,所有的数值都必须是整数(这里,n是从0开始的,和js等中的循环不同的是,至于到多少结束取决于元素的个数决定,如文档中有20个元素,3n(n=1,2...)就会分别选择第 3、6、9、...18个元素,n此时为6)
:nth-of-type()
:nth-of-type()伪类和nth-child()伪类找使用方法十分相似,只不过他匹配的是规则中指明类型的元素。
:nth-last-of-type伪类
:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth-last-child伪类一样,它是从最后一个子元素向回数的。
:last-child伪类
:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。
:first-of-type伪类
:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。
:last-of-type伪类
:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last-of-type(1)是一样的。
:only-child伪类
:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的(后者不够专业、简明)。
:only-of-type伪类
:only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同(后者专业性不够)。
:empty伪类
:empty伪类指向没有任何子元素的元素。
否定伪类——
否定伪类写成:not(s),参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。
::selection伪类——
::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。
通用兄弟元素选择器——
通用兄弟元素选择器通过两个简单选择符通过波浪号(~)分隔组成。它匹配第二个简单选择符 中所匹配的元素,而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素,但是第二个元素不一定必须紧跟在第一个元素之 后。这条CSS规则将会匹配所有p元素之后ul元素
| 来顶一下 |
