共计 690 个字符，预计需要花费 2 分钟才能阅读完成。

做项目遇到了一个 css 的问题，想记录一下，然后开通了思否一、常用的 1、.classname2、#id3、*4、标签选择器 {div}、{span} 等，选择了页面全部的 div、span 等二、进阶的 1、{div, p,span} 同时选择选择所有的 div、p、span2、{div p} 选择所有的 div 里面 (不包含 div) 的所有的 p 标签，不论是不是子一级还是子 n 级 3、{div>p} 选择所有父级元素为 div 的所有的 p 标签，不会发生穿透的现象只会在父元素与子一级之间 4、{div+p} 选择 div 元素后面出现的第一个 p 标签。出现效果的只有第一个 P 标签
<div> 一个 div</div>
<p>z 这是在 div 后面的 </p>
<p> 这是在 div 后面的 </p>

5、{div:hover、div>p:hover}“：”之前是选择的标签，”hover“是关键字，当鼠标放上去的时候，样式会被触发，否则就是选择的标签原来的样式。hover 也可以接一些选择器，让其只作用于选择的内容。（hover 简单的理解为就是选择器上面的选择器中间的一个关键词，然后有鼠标进入与离开事件）6、{关键词: focus} 一般作用于 input 或者 textarea 的文本输入框中，当点击的进入的时候触发样式 7、{关键字：first-letter} 作用于选择元素的第一个文字 8、{关键字：first-line} 作用于选择元素的第一行内容 9、{关键字：first-child} 选择的是前面选择元素的第一个所有的元素 10、{关键字：before} 在选择的元素前面加上内容，使用的时候必须设置 content 属性。好吧 暂时这样，继续写项目 11、12、

共计 1066 个字符，预计需要花费 3 分钟才能阅读完成。

看了一下最近写的 css 代码, 发现基本只用到了 id 选择器 (js 里)、后代选择器和类选择器 (因为听大牛推荐使用类选择器, 然后就开始大篇幅使用。。。)。所以想深入学习一下 css 选择器和 css 的效率优化, 先记录所学的一部分, 以备后续补充。
选择器非官方中文版
w3c 官方英文版
选择器效率由高到低:
id 选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=”external”]）
伪类选择器（a:hover,li:nth-child）
在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier 曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。
选择器的最后一部分，也就是选择器的最右边, 部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。“越具体的关键选择器，其性能越高”。举个例子：#myId span 和 span #myId 谁的效率更高? 答案是后者效率更高, 因为后者的关键选择器更具体。
选择器优先级:
行内样式就是这种语法的 < 标签名 style=” 属性 1; 属性 2; 属性 3; 属性 4 ″> 内容 </ 标签名 >。例如这样:
使用规则

规则
说明

行内样式会被!important 覆盖。
不推荐使用!important。!important 的优先级比行内优先级高, 有时候样式一直不生效就可能不知道在哪写了个!important。

优先级不同的选择器作用在同一元素上, 优先级高的生效。

优先级相同的选择器在同一元素上，以后出现的为准。
如果一直修改一个样式不生效，可能是被后出现的同名选择器给覆盖了。。。。

选择器越具体, 优先级越高。

优先级相同，与元素近的选择器生效。
head 里和.css 文件里，head 里的选择器生效。

注:!important 说明: 如果不使用!important，第二个样式会覆盖第一个，但是由于第一个有!important，所以在字号设置上优先级更高。
使用建议

建议
说明

避免将通用选择器作为通用选择器。
匹配开销大。

避免 id 选择器用标签和类。

避免 class 选择器用标签。

用 class 替换多层标签选择器。
减少 css 查找。

避免使用子选择器。
后代选择器是开销最最最最大的。

避免正则的属性选择器。

删除没用的样式。
用工具检索是否用到。

结束语: 诶, 看了一圈发现还是要用类选择器 …（捂脸）