css选择器 - 陈小溪

css选择器

一、属性选择器

css2定义的4个属性选择器：

E[foo]——选择匹配E的元素，且该元素定义了foo属性；
E[foo="bar"]——选择匹配E的元素，且该元素定义了foo属性值为“bar”;
E[foo~="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性是一个以空格定义的列表，其中一个列表值为“bar”;
E[foo|="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以连字符分隔的列表，值开头的字符为“bar”。

css3新增的3个属性选择器：

E[foo^="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为“bar”的子字符串，可用该选择器替换E[foo|="bar"]；
E[foo$="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为“bar”的子字符串；
E[foo*="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”的子字符串，可用该选择器替换E[foo~="bar"]。

二、结构伪类选择器

E:root——选择匹配E所在文档的根元素。在HTML文档中，根元素就是<html>元素；
E:nth-child(n)——选择所有在E的父元素中第n个位置的匹配E的子元素。参数n可以是数字、关键字（odd、even）和公式，参数的索引起始值为1，而不是0；
E:nth-last-child(n)——选择所有在E的父元素中倒数第n个位置的匹配E的子元素。该选择器与上一选择器是计算顺序相反的选择器，语法和用法相同；
E:nth-of-type(n)——选择所有在E的父元素中同类型第n个位置的匹配E的子元素。所有匹配E的子元素被分离出来单独排序；
E:nth-last-of-type(n)——选择所有在E的父元素中同类型倒数第n个匹配E的子元素；
E:first-child——选择位于E的父元素中第一个位置，且匹配E的子元素；
E:last-child——选择位于E的父元素中最后一个位置，且匹配E的子元素；
E:first-of-type——选择在E的父元素中匹配E的第一个同类型的子元素。功能类似于E:nth-of-type(1)选择器；
E:last-of-type——选择在E的父元素中匹配E的最后一个同类型子元素。功能类似于E:nth-last-of-type(1)选择器；
E:only-child——选择E的父元素只包含一个子元素，且该子元素匹配E的子元素；
E:only-of-type——选择E的父元素只包含一个同类型子元素，且该子元素匹配E的该E元素本身；
E:empty——选择匹配E的元素，且该元素不包含子节点。注意：文比往年也属于节点。

三、UI伪类选择器

css3共定义了11种UI元素状态伪类选择器：

E:hover——选择匹配E的元素，鼠标悬浮时触发；
E:active——选择匹配E的元素，鼠标点击元素按下左键时触发；
E:visited——选择匹配E的元素，鼠标点击元素松开左键时触发；
E:focus——选择匹配E的元素，获得焦点时触发；
E:enabled——选择匹配E的元素，元素可用时触发；
E:disabled——选择匹配E的元素，元素被禁用时触发；
E:read-only——选择匹配E的元素，元素为只读状态时触发；
E:read-write——选择匹配E的元素，元素为可读写状态时触发；
E:default——选择匹配E的元素，元素默认状态时触发；
E:indeterminate——选择匹配E的元素，元素为不定的、不明确的、模糊的状态时触发，使用机会非常少；
E:selection——选择匹配E的元素，元素为选择状态时触发，不常用。

四、其他选择器

E~F——通用兄弟元素选择器类型。选择匹配F的所有元素，且匹配元素位于匹配E的元素后面；
E:not(s)——否定伪类选择器类型。选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。s是一个简单结构的选择器，不能够使用复合选择器；
E:target——目标伪类选择器类型。选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能够有效。

posted on 2014-07-11 10:30 陈小溪阅读(266) 评论(0) 编辑收藏举报