CSS使用技巧总结

1. 选择器优化

在CSS样式表中，选择器的出现次数越多，渲染的时间也就越长。因此，为了加快页面的加载速度，需要优化选择器。

1.1. 尽量少使用通用选择器

通用选择器包括 * ，会匹配页面中所有的元素。因此，尽量避免使用通用选择器。

/* bad */
* {
  margin:0;
  padding:0;
}

/* good */
html,body {
  margin:0;
  padding:0;
}

1.2. 不使用后代选择器

后代选择器是指选择器中包含空格的情况，会匹配元素后代中的所有元素，会给页面带来渲染性能损失。

/* bad */
.container li {
  margin:0;
}

/* good */
.container>li {
  margin:0;
}

1.3. 少使用标签选择器

标签选择器是指选择器中只包含标签名的情况。因为使用标签选择器，会在整个文档中查找匹配的元素，会导致页面的渲染速度减慢。

/* bad */
ul {
  margin:0;
}

/* good */
.nav {
  margin:0;
}

2. 善用伪类和伪元素

伪类和伪元素虽然不是真正的HTML元素，但是它们可以在样式表中定义样式，从而对页面样式产生影响。

2.1. 使用 :hover 来改变链接的表现

使用 :hover 可以在鼠标移动到链接上时改变链接的样式，提升用户的交互体验。

a:hover {
  color:red;
}

2.2. 使用 ::before 来向元素前插入内容

::before 伪元素可以在元素内部的最前面插入内容。

.container::before {
  content:"前面插入的内容";
}

示例

下面是一个通过使用伪类和优化选择器来提高性能的示例：

/* bad */
ul li a {
  color:red;
}

/* good */
.nav-link {
  color:red;
}

.nav-link:hover {
  background-color:grey;
}

在示例中，使用了 "nav-link" class 来代替了 "ul li a" 选择器，从而优化了选择器。同时，也利用了 :hover 伪类来改变链接的背景色。

另外一个示例是使用 ::before 来在页面上创建一个新的元素：

.container::before {
  content:"这是一条重要信息";
  color:red;
}

在示例中，使用了 ::before 来在 .container 元素前插入了一条重要信息。