本文共 1842 字，大约阅读时间需要 6 分钟。
一、属性选择器
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指向该匹配元素时，样式效果才能够有效。
转载于:https://www.cnblogs.com/cicichan/p/3837062.html