选择器使用规则

选择器使用规则

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

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

例如：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

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

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

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

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

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

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

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

不推荐的写法：

#header #search {
  float: right;
}

推荐的写法：

#search {
  float: right;
}

4. 避免重复修饰选择器

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

不推荐的写法：

div#search {
  float: right;
}
ul.nav {
  overflow: hidden;
}

推荐的写法：

#search {
  float: right;
}
.nav {
  overflow: hidden;
}

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

不推荐的写法：

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

推荐的写法：

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