一、属性选择器
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指向该匹配元素时,样式效果才能够有效。
css选择器,布布扣,bubuko.com
css选择器
原文:http://www.cnblogs.com/cicichan/p/3837062.html