一、选择器
1、基础选择器
| 选择器 | 示例 | 实例说明 |
|---|---|---|
| 通配符选择器 | * | 选择所有元素 |
| 标签/元素选择器 | div | 选择所有<div>元素 |
| 类选择器 | .box | 选择所有class="box"的元素 |
| id选择器 | #myid | 选择id="myid"的元素 |
2、复合型选择器
| 选择器 | 实例 | 实例说明 |
|---|---|---|
| 后代选择器 | div p | 选择<div>元素内的所有<p>元素，不论隔多少代 |
| 子选择器 | div>p | 选择所有父级是<div>元素的<p>元素 |
| 相邻选择器 | div+p | 选择紧跟在<div>元素之后的第一个<p>元素 |
| 并集选择器 | div,p | 选择所有<div>元素和<p>元素 |
| 伪类选择器 | :hover | “悬停”：鼠标放到标签上的时候 |
3、CSS3新增选择器 详细
| 选择器 | 实例 | 实例说明 |
|---|---|---|
| 属性选择器 | E[att="val"]p | 选择具有 att 属性且属性值等于 val 的<E>元素 |
| 结构伪类选择器 | E:first-child | 选择<E>元素在其父级中必须是第一个子级的元素 |
| 伪元素选择器 | E::before | 在<E>元素之前插入内容 |
伪类选择器
静态伪类: 只能用于超链接
a:link超链接点击之前a:visited链接被访问过之后
动态伪类：针对所有标签都适用
:hover“悬停”：鼠标放到标签上的时候:active“激活”： 鼠标点击标签，但是不松手时。:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）
结构伪类：一般认为是CSS3新增 详细
E:first-child选择<E>元素在其父级中必须是第一个子级的元素E:lang(it)选择一个lang属性的起始值="it"的所有<E>元素，相当于|=选择器！注：除以上两个是在CSS2中已存在，下面其他结构伪类都是在CSS3中新增的。E:last-child选择<E>元素在其父级中必须是最后一个子级的元素E:nth-child(n)选择<E>元素在其父级中是第n个子级的元素；为 2n/odd 时，该元素在父级中是偶数子级的元素，为 2n+1/even 时，该元素在父级中是奇数子级的元素E:only-child选择每个<E>元素是其父级的唯一子元素（该父元素有且只有一个子元素：<E>）E:first-of-type选择与<E>元素同类型的第一个同级兄弟元素，类似还有:last-of-type、:nth-of-type(n)E:only-of-type选择父元素中与<E>元素同类型的唯一子元素（该父元素有多个子元素）E:not()这个括号里面填的是<E>元素其父级中需要排除的子级元素E:target选取页面中某个 target 元素:root选择文档的根元素。在 HTML 中根元素永远是 HTML
伪元素选择器
我们之所以称为伪元素，是因为新创建的这个元素在文档树中是找不到的，JS 无法获取伪元素。
| 伪元素 | 作用 |
|---|---|
| E::first-letter | 选择<E>元素的首字母 |
| E::first-line | 选择<E>元素的第一行 |
| E::before | 在<E>元素之前插入内容 |
| E::after | 在<E>元素之后插入内容 |
| E::selection | 在<E>元素中被用户选中或处于高亮状态的部分 |
伪类和伪元素的区别
伪类的作用对象是整个元素，而伪元素只作用于元素的一部分内容。
在CSS3中，为了区分伪类和伪元素，一般伪类前面是单冒号 : 。伪元素是双冒号 :: 。不过由于CSS的兼容性问题，伪元素也可使用单冒号，但不考虑兼容性问题时，尽量使用双冒号，因为单双冒号的区分，可以给CSS代码带来更高的可读性。
二、优先级
| 权重值 | 样式选择器 |
|---|---|
| 0 | 通配符选择器（继承） |
| 1 | 标签选择器、伪元素选择器 |
| 10 | 类选择器、属性选择器、伪类选择器 |
| 100 | id选择器 |
| 1000 | 内联样式 |
| 无穷大 | ! important |
| 需计算累加权重 | 复合选择器 |
！！！注
- ! important 声明的样式的优先级最高；
- 如果优先级相同，则最后出现的样式生效；
- 继承得到的样式的优先级最低；
- 通用选择器（*）、子选择器（>）和相邻选择器（+）并不在这四个等级中，所以它们的权值都为0；
- 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
三、如何优化 CSS 性能
1、避免使用通用选择器
.content * {color: red;}
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
2、避免在 id 选择器前使用标签或 class 选择器
避免使用
button#backButton {…}
.menu-left#newMenuIcon {…}
推荐使用
#backButton {…}
#newMenuIcon {…}
解释： 因为ID选择器是唯一的，加上标签或 class 反而增加不必要的匹配。
3、避免在 class 选择器前使用标签名
避免使用
p.indented {…}
推荐使用
.indented {…}
解释：同第二条，但如果你定义了多个 .indented，而且在不同的元素下是样式不一样，则不能去掉，比如你 CSS 文件中定义如下：
p.indented{color:red;}
span.indented{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
4、尽量少使用层级关系。用 class 选择器替换，减少 css 查找
避免使用
treeitem[mailfolder="true"] > treerow > treecell {…}
#divBox ul li a{…}
推荐使用
.treecell-mailfolder {…}
5、尽量使用继承：子级相同样式选择父级使用，子级继承
避免使用
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
推荐使用
#bookmarkMenuItem { list-style-image: url(blah) }
