css权重有什么用

这篇文章主要讲解了“css权重有什么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css权重有什么用”吧！

当阳网站建设公司创新互联建站,当阳网站设计制作，有大型网站制作公司丰富经验。已为当阳超过千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的当阳做网站的公司定做！

CSS权重指的是样式的优先级，决定了css规则怎样被浏览器解析直到生效；当两条或多条样式作用于一个元素时，权重高的那条样式对元素起作用，而权重相同的，后写的样式会覆盖前面写的样式。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

• 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。

• 当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

• 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。

• 如果两个选择器同时作用到一个元素上，权重高者生效。

权重的基本规则

1、相同的权重：以后面出现的选择器为最后规则（比如写了相同的两个样式 #content h2 {color:red} ）

2、不同的权重，权重值高则生效

3、！important（无限大）>行内样式（权重1000）>id选择器（权重100）>类选择器（10）=伪类选择器（10）=属性选择器（10）>元素选择器（1）>通用选择器（0）>继承的样式>浏览器默认的样式。

4、元素选择器相加永远没有类选择器的权重大。

选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高

css权重计算

如果多个不同类型的选择器同时为一个对象设置样式时，该对象将如何显示最终样式，下面给出一个简单的计算方法。对于常规选择器它们都拥有一个优先级加权值，说明如下。

• 标签选择器：优先级加权值为 1。

• 伪元素或伪对象选择器：优先级加权值为 1。

• 类选择器：优先级加权值为 10。

• 属性选择器：优先级加权值为 10。

• ID选择器：优先级加权值为 100。

• 其他选择器：优先级加权值为 0，如通配选择器等。

然后，以上面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则如下：

• 统计选择器中 ID 选择器的个数，然后乘以100。

• 统计选择器中类选择器的个数，然后乘以 10。

• 统计选择器中的标签选择器的个数，然后乘以 1。

依此方法类推，最后把所有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大。

对于由多个选择器组合而成的复合型选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式。

如果分值相同，则根据位置关系来进行判断，靠近对象的样式就应有高的优先级。

【示例】通过内嵌样式为同一个元素使用不同的复合选择器为其设置样式属性，通过优先级规则进行比较得出最终样式属性值。

div{
    margin: 0 auto;  /*div居中*/
    text-align: center;  /*文本居中*/
}
.Cent{
    width: 400px;  /*设置宽度，否则居中看不见效果*/
    border: 1px dashed #CC0099;  /*类别选择器设置边框线*/
    padding: 10px 15px;  /*设置间距*/
}
#imp{border: 1px dashed #3366FF;  /*ID 选择器设置边框线*/ }
.Cent{ font-size: 14px;  /*类别选择器设置字体大小*/ }
.Cent p{
    font-size: 16px;  /*类别选择器和标记选择器一起设置字体大小*/
    font-weight: bold;  /*字体加粗*/
}
.Cent .duanluo {
    font-weight: normal;  /*两次类别选择器设置取消加粗效果*/
    line-height:1.5em;  /*段落行髙*/
    text-align:left;  /*文本左对齐*/
}
.Cent .duanluo span{ color:#009966;  /*复合选择器设置字体彦员色*/ }
#imp span{
    color: #669933;  /*ID选择器和标签选择器进行定义*/
    font-weight: bold;  /*字体加粗*/
    font-size:22px;  /*字体22像素，要比较的地方*/
}
span{ font-size: 30px important;  /*标签使用优先级最高的 !important 命令*/ }
span{ font-size: 40px; ! important  /*错误手写 !important 命令的位置*/ }




    CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则则存放在另一个文件中或 HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档代码更加简练，缩短浏览器的加载时间。