css优先级 属性与类

CSS（Cascading Style Sheets）是网页制作中重要的样式表语言，可以用来控制页面的布局、颜色、字体等各种视觉效果。在编写 CSS 样式时，我们经常会用到“优先级”这个概念，它可以决定同一个元素的不同样式之间的覆盖关系。

CSS 的优先级是由三个因素决定的，它们分别是选择器的特异性（specificity）、!important 标志、以及样式的位置。选择器的特异性是最重要的因素，它用一个数值表示，数值越大则优先级越高。具体来说：

    - 选择器里 ID 属性的个数：特异性为 100
    - 选择器里 class、伪类或属性选择器的个数：特异性为 10
    - 选择器里元素的个数：特异性为 1

下面是一个特异性计算的例子：

    #main div.widget p.title { color: red; }   /* 特异性为 1-0-1-3 */
    div.widget p.title { color: green; }        /* 特异性为 0-0-1-3 */
    .title { color: blue; }                     /* 特异性为 0-0-1-0 */

在这个例子中，第一个选择器的特异性为 1-0-1-3，它比第二个选择器的特异性更高，所以 color 属性的值是 red。但是第三个选择器的特异性太低，所以它被第一个和第二个选择器所覆盖，color 属性的值是无法生效的。

除了特异性之外，还有一种方式可以强制覆盖样式，那就是使用 !important 标志。例如：

    p { color: blue !important; }

在这个例子中，无论其他样式的定义如何，所有的 p 元素的文字颜色都将是蓝色。

最后，还有一种场景需要了解，那就是样式的位置。如果同一个元素的多个样式定义在不同的文件（或者不同的位置）中，后定义的样式往往会覆盖之前的样式，这被称为“后定义的样式优先”（last defined rule wins）。

综上所述，CSS 样式的优先级是由选择器的特异性、!important 标志和样式位置所决定，了解它们的规则和使用方式可以帮助我们更好地控制页面的样式。