• 选择器使用规则
    • 1. 可以使用 * 通用选择器。
    • 2. 不要在选择器末尾使用 * 通用选择器。
    • 3. 如果是页面唯一的元素请使用 ID 选择器。
    • 4. 避免重复修饰选择器
    • 5. 所有 组合选择器 （>, +, ~, >>）前后保留一个空格（以空格表示的后代选择器除外）

    选择器使用规则

    1. 可以使用 * 通用选择器。

    * 通用选择器效率低是一个误区，如有必要可以使用。测试文章关于css通配符性能问题不完全测试

    例如：

    1. * {
    2.   -webkit-box-sizing: border-box;
    3.   -moz-box-sizing: border-box;
    4.   box-sizing: border-box; 
    5. }

    2. 不要在选择器末尾使用 * 通用选择器。

    CSS 选择器匹配规则是从右往左，例如：

    1. .mod .foo * {
    2.   border-radius: 6px;
    3. }

    3. 如果是页面唯一的元素请使用 ID 选择器。

    引用为后代选择器和ID选择器而辩护

    我一直以来所主张的使用 id 的方式，其实就是 HTML5 新增元素的前身。2000 年时，我们没有 footer 元素，为了给该div中的内容赋以结构上的意义，我们这样写：div id=”footer”。今天，根据人们访问我们网站所用的浏览器和设备，我们可以选择用 HTML5 的 footer 元素替代老方式。但若是我们不能使用 HTML5 元素，使用 id 也没有什么不对的。

    但应避免使用多个 ID 选择器。

    不推荐的写法：

    1. #header #search {
    2.   float: right;
    3. }

    推荐的写法：

    1. #search {
    2.   float: right;
    3. }

    4. 避免重复修饰选择器

    在一定意义上，这会降低选择器性能。

    不推荐的写法：

    1. div#search {
    2.   float: right;
    3. }
    5. ul.nav {
    6.   overflow: hidden;
    7. }

    推荐的写法：

    1. #search {
    2.   float: right;
    3. }
    5. .nav {
    6.   overflow: hidden;
    7. }

    5. 所有组合选择器（>, +, ~, >>）前后保留一个空格（以空格表示的后代选择器除外）

    不推荐的写法：

    1. .foo>.bar+div~#baz {
    2.   color: blue;
    3. }

    推荐的写法：

    1. .foo > .bar + div ~ #baz {
    2.   color: blue;
    3. }