1. 基本选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | t通配选择器 | 选择文档中所有的HTML元素 |
| E | 元素选择器 | 选择指定的类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
| .selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
基本选择器是比较常用的，这里就不再做其他介绍。
2. 层次选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器（包含选择器） | 选择匹配的F元素，且F被包含在E内 |
| E>F | 子选择器 | 选择匹配的F元素，且F元素是E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且F元素紧位于E元素后面 |
| E~F | 通用选择器 | 选择匹配的F元素，且位于E后所有的F元素 |
新建一个HTML文件，在具体使用层选择器之前，先来看看页面的初步效果
2.1 后代选择器
后代选择器（E F）作用就是选择某元素的后代元素。这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。
2.2 子选择器
2.3 相邻兄弟选择器
2.4 通用兄弟选择器
3. 动态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 匹配元素被定义了超链接并未被访问过 |
| E:visited | 链接伪类选择器 | 匹配元素被定义了超链接并已被访问过 |
| E:acitved | 用户行为伪类选择器 | 匹配元素被激活 |
| E:hover | 用户行为伪类选择器 | 用户鼠标停留在元素E上 |
| E:focus | 用户行为伪类选择器 | 匹配的元素获得焦点 |
锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte，也就是“link-visited-hover-active”。
4. 目标伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:target | 选择匹配E的所有元素，且匹配元素被相关URL指向 |
目标伪类选择器“:target”用来匹配文档（页面）的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个#，后面带有一个标志符名称，例如“#contact”，“:target”就是用来匹配ID为“contact”的元素，然后供定义样式。
5. 语言伪类选择器
语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，有两种方法表示：
1）使用HTML5，直接可以设置文档的语言：
<!DOCTYPE HTML>
<html lang="en-US">
另一种方法就是手工在文档中指定lang属性，并设置对应的语言：
<body lang="fr>
E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。
6. UI元素状态伪类选择器
UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在HTML元素中有可用和不可用状态，例如表单中的文本输入框、HTML元素中有选中和未选中状态，例如表单中的复选按钮和单选按钮。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或单选按钮表单元素 |
| E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
| E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
7. 结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 |
| E:root | 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
| E F:nth-child(n) | 选择父元素E的第n个子元素F。其中n可以是整数（1、2、3）、关键字（even、odd）、可以是公司（2n+1、-n+5），而且n的起始值是1，而不是0 |
| E>F:nth-last-child(n) | 选择元素E的倒数第n个子元素F。 |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型的子元素，且该子元素匹配E元素 |
| E:empty | 选择没有子元素的元素，且该元素也不包含任何文本节点 |
:nth-child和:nth-of-type的区别
<div class="post">
<h1>我是标题一</h1>
<p>我是文章中的第一个段落</p>
<p>我是文章中的第二个段落</p>
</div>
.post>p:nth-child(2){color: red;} //第一个段落变红，但我们是想让第二个段落变红
.post>p:nth-of-type(2){color: red;} //第二个段落变红，是我们想要的
“:nth-child”选择的是某父元素的子元素，这个子元素并没有确切的类型，同时满足两个条件时方能有效果，其一是子元素，其二此子元素刚好处在那个位置；“:nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。
8. 否定伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:not(F) | 匹配所有除元素F外的E元素 |
因此，否定伪类选择器可以起到过滤内容的作用
9. 伪元素
| 伪元素 | 功能描述 |
|---|---|
| ::first-letter | 匹配元素的第一个字母 |
| ::first-line | 匹配元素的第一行文本 |
| ::before | 在匹配元素前插入内容 |
| ::afer | 在匹配元素后插入内容 |
| ::selection | 匹配突出显示的文本（仅接受两个属性:background、color） |
为什么伪元素要使用两个冒号？双冒号和单冒号在CSS3中主要用来区分伪类和伪元素。
10. 属性选择器
| 选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素。其中E是可以省略的，表示选择定义了attr属性的任意类型元素。 |
| E[attr=val] | 选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同时E元素省略时表示选择定义了attr属性值为val的任意类型元素。 |
| E[attr | =val] |
| E[attr~=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值具有多个空格分隔的值，其中一个值等于val。 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值任意位置包含了“val”。即字符串val与属性值中的任意位置相匹配。 |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值以val开头的任何字符串。 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串。 |
CSS3中常见的通配符如下表所示：
| 通配符 | 功能描述 | 示例 |
|---|---|---|
| ^ | 匹配起始符 | span[class^=span] 表示选择类名以“span”开头的所有span元素 |
| $ | 匹配终止符 | a[href$=pdf] 表示选择以“pdf”结尾的href属性的所有a元素 |
| * | 匹配任意字符 | a[title*=site] 匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串 |
2076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
