Question

有时，css会为纯HTML页面添加动态。例如，在悬停时更改背景颜色。我想了解，css是如何工作的？

CSS：

 div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: black;
  }
  div:hover {
    background: red;
  }

HTML：

  <html>
  <body>
     <div></div>
  </body>
  </html>

当鼠标进入“div”时，浏览器会将背景覆盖为黑色（即浏览器离开高度：100px，宽度：100px和位置：绝对值）或重新计算它？

通常情况下，当某个事件发生并更改元素的css时，它是否会覆盖css样式中存在的属性？换句话说，在几个事件之后，元素的样式是否可能最终是任意的？

Answer 1

通常情况下，当某个事件发生并更改元素的css时，它是否只覆盖css样式中存在的属性？

元素开始匹配新的选择器。新的规则集应用于元素。根据级联的标准规则重新计算元素的属性。

换句话说，在几个事件之后，元素的样式是否可能最终是任意的？

没有。级联规则（定义应用哪些订单规则）在规范中（非常）明确定义。他们没有任何武断。

Answer 2

简而言之：当您将鼠标悬停在元素上时，该元素将进入:hover状态。它现在匹配CSS文件中的两个选择器：div和div:hover。两个规则集的所有属性都应用于元素。哪里有冲突，例如两者都定义了background，特定的选择器获胜（*阅读规范，规则不易汇总）。

当您离开元素时，它会退出:hover状态。 div:hover选择器不再适用，现在只应用一个规则集。从头开始重新计算所有元素的样式属性，导致background再次转向black（因为它是唯一适用的规则）。

任何时候一切都处于一种非常明确的状态，这些变化不是渐进式的，永远不会导致奇怪的状态，因为某些事情没有得到解决等等。