概述
很多人认为CSS的选择器很容易、简单，简单的设置个class，简单的设置个id，选择器有什么难的?我就是这样想的，知道我翻开书，查看了一下CSS中所有的选择器，惊呆了好不好!
学习的方法
- 技术为了解决什么样的问题?
我们一般编HTML、CSS都是用类选择器。想要什么样式，给元素加个类，开始编!但是这有一个问题，首先，一个大型网站，CSS代码多则几千行，class本身是没有意义的，纯粹是为了CSS而服务，属于多余的属性。再有使用CSS并没有真正的把一个元素和样式绑定起来，一个class，按钮也可以用，div也可以用，span也可以用，这样很混乱。基于此CSS3提倡直接将选择器和元素绑定起来。 - 技术的优势和劣势
优势: 提倡将选择器和元素绑定起来，这样样式表中什么样式与什么元素匹配一目了然。
劣势: 不太好记....
选择器
1.属性选择器
| 选择器 | 描述 | 使用方法 |
|---|---|---|
| E[att == val] | E元素属性值中等于val指定的字符，则E元素使用该样式。 | E[id==myDiv]{ /* css */} |
| E[att *= val] | E元素属性值中包含val指定的字符，则E元素使用该样式。 | E[id*=myDi]{ /* css */} |
| E[att ^= val] | E元素属性值中前缀为val指定的字符，则E元素使用该样式。 | E[id^=my]{ /* css */} |
| E[att $= val] | E元素属性值中结尾为val指定的字符，则E元素使用该样式。 | E[id$=Div]{ /* css */} |
依靠 E[att $= val] 可以用CSS识别出文件后缀名。
a[href $= jpg]{}
a[href $= png]{}
不同的后缀名给不同的样式
2 .伪类与伪元素选择器
| 伪类选择器 | 描述 |
|---|---|
| E:link | 设置超链接a在未被访问前的样式。 |
| E:visited | 设置超链接a在其链接地址已被访问过时的样式。 |
| E:hover | 设置元素鼠标在其悬停时的样式。 |
| E:active | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| E:focus | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素)。 |
| E:checked | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)。 |
| E:enabled | 匹配用户界面上处于可用状态的元素E。(一般应用于表单元素) |
| E:disabled | 匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素) |
| E:empty | 匹配没有任何子元素（包括text节点）的元素E |
| E:root | 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML |
| E:not(s) | 匹配不含有s选择符的元素E 比如: body *:not(h1){} 匹配body中排除h1的元素 |
| E:first-child | 匹配父元素的第一个子元素E |
| E:last-child | 匹配父元素的最后一个子元素E |
| E:only-child | 匹配父元素仅有的一个子元素E |
| E:nth-child(n) | 匹配父元素的第n个子元素E |
| E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E |
| E:first-of-type | 匹配同类型中的第一个同级兄弟元素E |
| E:last-of-type | 匹配同类型中的最后一个同级兄弟元素E |
| E:only-of-type | 匹配同类型中的唯一的一个同级兄弟元素E |
| E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
| E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
伪元素选择器并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。
| 伪元素选择器 | 描述 |
|---|---|
| E:first-line | 用于为E元素的第一行文字使用样式。 |
| E:first-letter | 用于为E元素的文字的首字母(欧美文字)或第一个字(中文汉字) |
| E:before | 用于在E元素之前插入一些内容。 |
| E:after | 用于在E元素之后插入一些内容 |
3.元素选择器
| 伪元素选择器 | 描述 |
|---|---|
| * | 选择所有的元素 |
| #idName | 选择指定的元素 |
| .className | 选择id属性等于idName的元素 |
| E | 选择class属性包含className的元素 |
4.关系选择器
| 伪元素选择器 | 名称 | 描述 |
|---|---|---|
| E F | 包含选择器 | 选择所有包含在E元素里面的F元素 |
| E>F | 子选择器 | 选择所有作为E元素的子元素F |
| E+F | 相邻选择器 | 选择紧贴在E元素之后的F元素 |
| E~F | 兄弟选择器 | 选择E元素所有兄弟元素F |
