CSS 是如何使静态 HTML 页面看起来动态的？ [关闭]答案

【问题标题】：How can CSS seemingly make static HTML pages dynamic? [closed]CSS 是如何使静态 HTML 页面看起来动态的？ [关闭]
【发布时间】：2016-02-05 00:37:06
【问题描述】：

偶尔，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 样式中存在的属性？换句话说，在一些事件之后，一个元素的样式是否会变得任意？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

换句话说，在一些事件之后，一个元素的样式可能会变得随意吗？

没有。级联规则（定义应用哪些顺序规则）在规范中（非常）明确定义。它们没有任何随意性。

【讨论】：

【解决方案2】：

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

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

一切都始终处于一个非常明确的状态，变化不是增量的，也永远不会因为某些东西没有被取消设置而导致奇怪的状态。

【讨论】：