你所不知道的css规则，值得收藏！！

你所不知道的CSS规则，值得收藏！！

1. 使用!important提高样式优先级

在CSS中，当多个样式规则同时应用到一个元素上时，浏览器会根据优先级来确定最终的样式。而有时候我们希望某个样式规则具有更高的优先级，可以使用!important来实现。

p {

  color: red!important;
}

在上面的例子中，p元素的文字颜色将会被强制设置为红色，忽略其他样式规则的优先级。

2. 使用:before和:after伪元素

伪元素是一种在CSS中表示虚拟元素的方式，可以通过:before和:after来添加内容到元素的前面和后面。

p:before {

  content: "前面的内容 ";
}
p:after {
  content: " 后面的内容";
}

通过:before和:after伪元素，我们可以在p元素的前面添加文本“前面的内容”，并在后面添加文本“后面的内容”。

3. 层叠上下文

层叠上下文是CSS中一个重要的概念，它决定了元素在垂直方向上的显示顺序。可以通过z-index属性来创建一个新的层叠上下文。

.parent {

  position: relative;
  z-index: 1;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

在上面的例子中，.parent元素创建了一个新的层叠上下文，而.child元素的z-index值为0，所以它将会显示在.parent元素之上。

4. CSS变量

CSS变量是一种可以存储和重复使用的值，它可以在整个CSS文件中使用，并且可以动态改变。

:root {

  --main-color: #ff0000;
}
p {
  color: var(--main-color);
}

在上面的例子中，--main-color变量存储了主要颜色的值，可以在后面的样式中重复使用。

5. CSS计数器

CSS计数器允许我们在样式中创建一个计数器，可以用于自动生成序号或标记。

ol {

  counter-reset: section;
}
li:before {
  counter-increment: section;
  content: counter(section) ". ";
}

在上面的例子中，ol元素创建了一个计数器section，并且通过counter-increment属性来递增计数器的值。在每个li元素的前面通过content属性显示计数器的值和一个点。

总结

以上介绍了一些你可能不知道的CSS规则，包括使用!important提高样式优先级、使用:before和:after伪元素添加内容、层叠上下文的概念、CSS变量以及CSS计数器。这些规则可以帮助我们更加灵活地控制和定义元素的样式，提高开发效率。记得将这些规则收藏起来，以备日后使用。