我们经常会为同一个或同一类HTML元素定义多次CSS样式，如果这些样式是关于同一个属性的，那么只有一个会生效。具体的规则是：内联样式覆盖其他所有样式，后面加载的外部样式表或后定义的内部样式表会覆盖之前的CSS代码。
动手写9.1.7 CSS的覆盖
“动手写9.1.7”中同时使用了内联样式、内部样式表和外部样式表，其中的外部样式表和“动手写9.1.3”中的一致。这三种方式都定义了p元素的样式，外部样式表中的font-size属性值是18px，内部样式表中的font-size属性值是12px，内联样式的font-size属性值是24px，由于内联样式优先级最高，因此实际页面中生效的font-size属性值是24px。外联的style.css中定义了color属性值为green，内部样式表中的color属性值为blue，由于内部样式表在后，因此实际页面中生效的color属性值为blue。效果如图9.1.1所示：
图9.1.1 CSS的覆盖
使用多个外部样式表的时候要注意覆盖问题，要把最希望使用的样式放到更后面的位置。我们定义内部样式表的时候一般都希望其能在本文件中生效，所以内部样式表一般在所有外部样式表之后定义。
9.1.6 !important语法
CSS中可以使用!important语法来提升样式的权重，这一关键字需要放在某一样式代码行的末尾且在分号之前。其格式如下：(www.xing528.com)
通常而言，当CSS中某元素的一个属性被多次定义时，只有后定义的属性值会生效。在实际项目中，由于会大量引入外部文件，很容易造成某个样式被后面文件中重复定义的属性值覆盖。为了避免这种情况，我们可以使用!important关键字来提升样式权重。
动手写9.1.8 使用!important关键字提升样式权重
“动手写9.1.8”中重复定义了p元素的color样式，如果第一个样式没有使用!important关键字，第二次定义的样式会覆盖第一次定义的样式，p元素中的内容将展示为黑色字体。本例的效果如图9.1.2所示：
图9.1.2 使用!important关键字提升样式权重
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
