本文主要讲解“css权重有什么用”，简单明了，易学易懂。现在，请跟随边肖的思路，一起学习“css权重有什么用”！
Css权重指的是样式的优先级，它决定了浏览器如何解析CSS规则，直到它们生效。当两个或多个样式作用于一个元素时，权重较高的样式作用于该元素，而权重相同的样式将覆盖之前编写的样式。
本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。
CSS权重是指样式的优先级。有两种或两种以上的样式作用于一个元素，权重较高的样式作用于该元素。如果权重相同，后面写的样式会覆盖前面写的样式。
权重决定浏览器如何解析css规则，直到它们生效。Css权重与css规则的显示方式有关。
当许多规则应用于一个元素时，权重是决定哪些规则有效或优先的过程。
每个选择器都有自己的权重。每个css规则都包含一个权重级别。这个级别由不同的选择器加权。通过权重，不同的风格最终会作用在你的网页上。
如果两个选择器同时作用于一个元素，权重最高的那个将生效。
权重的基本规则
1.相同的权重：将稍后出现的选择器作为最终规则(例如，编写相同的两种样式# contenth2 {color3360red})
2.权重值较高的不同权重将生效。
3、重要(无限)内联样式(权重1000)id选择器(权重100)类选择器(10)=伪类选择器(10)=属性选择器(10)元素选择器(1)常规选择器(0)继承的样式浏览器的默认样式。
4.元素选择器的添加从来没有类选择器那么重要。
选择器可以包含一个或多个与重量相关的计算点。如果计算的权重值较大，则认为该选择器的权重较高。
css权重计算
如果不同类型的多个选择器同时为一个对象设置样式，对象将如何显示最终的样式？这里有一个简单的计算方法。对于常规选择器，它们都有一个优先级加权值，解释如下。
标签选择器：优先级加权值为1。
伪元素或伪对象选择器：优先级加权值为1。
类别选择器：优先级权重值为10。
属性选择器：优先级权重值为10。
ID选择器：优先级加权值为100。
其他选择器：优先级加权值为0，如通用选择器等。
然后，以上述加权值为起点，计算每种样式中选择器的总加权值。计算规则如下：
统计选择器中ID选择器的数量，然后乘以100。
计算选择器中类选择器的数量，然后乘以10。
计算选择器中标签选择器的数量，然后乘以1。
类比这种方法，将所有的权值相加就可以得到当前选择器的总权值，最后根据权值可以确定哪种风格的优先级更高。
对于由多个选择器组成的复合选择器，首先单独计算每个选择器的加权值，然后将它们相加得到当前选择器的总分。最后，根据选择器的评分大小，评分越高，优先级越高，然后应用它设置的样式。
如果分数相同，根据位置关系来判断，接近对象的风格要有高优先级。
【示例】使用不同的复合选择器，通过嵌入样式为同一元素设置样式属性，通过与优先级规则进行比较，得到最终的样式属性值。
！doctypehtml
超文本标记语言
头
metachartset=' utf-8 '
标题CSS样式优先级/标题
styletype='text/css '
div{
margin:0auto/*div中心*/
文本对齐：居中；/*文本居中*/
}。中心
宽度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; /*<span>标签使用优先级最高的 !important 命令*/ }
span{ font-size: 40px; ! important /*错误手写 !important 命令的位置*/ }
</style>
</head>
<body>
<div class="Cent" id="imp">
<p class="duanluo" id="DL"><span>CSS</span>（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则则存放在另一个文件中或 HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档代码更加简练，缩短浏览器的加载时间。
</p>
</div>
</body>
</html>
页面效果如下图所示。
在上面示例中，查看浏览器效果并进行逐步分析代码，需要注意的是测试时：下面每一步测试时，后面的代码需要删除，故浏览器有多次显示结果，每一步都进行浏览器显示查看结果。
第 1 步
实现浏览器居中，针对 div 标签设置元素居中属性margin: 0 auto;，以及文本居中属性text-align:center;。
div { margin: 0 auto; text-align: center; }
-
第 2 步
Cent 层设置宽度为 400 像素，如果没有宽度设置，则浏览器上的居中也将无效，接着设置 4 个方向的内间距，最后设置 1 像素颜色为粉红色虚线边框线。
.Cent{ width: 400px; border: 1px dashed #CC0099; padding:10px 15px; }
-
第 3 步
通过 ID 值引用 Cent 层，定义 1 像素颜色为粉蓝色虚线边框线，根据前面介绍的优先级规则：类选择器 10 分、ID 选择器 100 分，最终边框线颜色为蓝色。
如果将类别选择器 Cent 层和 ID 选择器 #imp 定义的顺序颠倒过来（如下所示），最终结果依然是蓝色，其原因在于 ID 选择器优先级别高于类选择器。
.Cent{ width: 400px; border: 1px dashed #CC0099; padding: 10px 15px; }
#imp { border: 1px dashed #3366FF; }
-
第 4 步
.Cent{ } 定义字体大小为 14 像素，而 .Cent p{} 定义字体大小为 16 像素。根据前面介绍的优先级规则：类选择器 10 分、标签选择器 1 分，那么 .Cent{ } 为 10 分、.Cent p{} = 10+1 = 11分，故最终结果为段落字体大小为 16 像素且字体加粗显示。
.Cent { font-size: 14px; }
.Cent p { font-size: 16px; font-weight: bold; }
-
第 5 步
Cent 层中段落添加 class 名 duanluo，定义字体不再加粗显示、行高 1.5em、文本左对齐，上一步的加粗设置如果字体大小无效，则查看加粗结果，行高设置使用相对单位，这样可以避免字体大小的改变而影响原先段落文字之间的距离。
段落内的 <span> 标签设置字体颜色为 #009966，而通过 ID 值设置字体颜色为 #669933。根据前面介绍的优先级规则：类选择器 10 分、标签选择器 1 分、ID 选择器 100 分，故 .Cent .duanluo span 得分 = 10+10+1 = 21分，而 #imp span 得分 = 100+1 = 101 分，最终字体颜色为 #669933。
.Cent .duanluo { font-weight:normal; line-height:1.5em; text-align:left }
.Cent .duanluo span{ color: #009966; }
#imp span{ color:#669933; font-weight:bold; font-size:22px }
-
第 6 步
在设置段落字体大小时，最终 .Cent p 设置的字体大小为浏览器显示结果：16像素，而通过 ID 选择器定义字体大小后，字体大小变为 22 像素。
这里通过 !important 命令将 <span> 字体大小设置为 30 像素，因 !important 命令权限无限大，即分数值较高，暂定值为 1000，故 #imp span 分数为 101，小于 !important 命令值 1000，最终结果为 30 像素。
若span{ font-size:30px !important; }和#imp span{ font-size:5Opx !important; }进行比较，根据前面介绍的优先级规则：ID 选择器 100 分、标签选择器 1 分、!important 命令值 1000，故 span{} 得分为 1000（内部属性中 !important）+1（标签选择器）= 1001 分，而 #imp span 得分为 1000（内部属性中 !important）+100（ID选择器）+1（标签选择器）= 1101 分。
针对 !important 命令进行一次错误的写法并定义字体大小为 40 像素，通过浏览器发现：!important 命令放置在声明语句与分号之间，否则无效。
.Cent p { font-size: 16px; }
#imp span{ color:#669933; font-weight:bold; font-size:22px }
span{ font-size: 30px !important; }
span { font-size: 40px; !important } /*错误书写方法*/
感谢各位的阅读，以上就是“css权重有什么用”的内容了，经过本文的学习后，相信大家对css权重有什么用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/139205.html