搜索

首页 >web前端 >前端问答 >css权重有什么意义

css权重有什么意义

青灯夜游
青灯夜游原创
2021-12-09 13:45:171806浏览

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

css权重有什么意义

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

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

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

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

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

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

权重的基本规则

1、相同的权重：以后面出现的选择器为最后规则（比如写了相同的两个样式 #content h1 {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。

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式优先级</title>
<style type="text/css">
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;  /*<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>

页面效果如下图所示。

2.gif

在上面示例中，查看浏览器效果并进行逐步分析代码，需要注意的是测试时：下面每一步测试时，后面的代码需要删除，故浏览器有多次显示结果，每一步都进行浏览器显示查看结果。

第 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、文本左对齐，上一步的加粗设置如果字体大小无效，则查看加粗结果，行高设置使用相对单位，这样可以避免字体大小的改变而影响原先段落文字之间的距离。

段落内的 45a2772a6b6107b401db3c9b82c049c2 标签设置字体颜色为 #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 命令将 45a2772a6b6107b401db3c9b82c049c2 字体大小设置为 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权重有什么意义的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 css css3 auto 继承 class 对象 选择器 margin 伪类 伪元素
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：取消超链接下划线的CSS样式声明语句是什么下一篇：ajax是哪一年发行的

相关文章

查看更多