Home >Web Front-end >Front-end Q&A >What is the significance of css weight
What is the significance of css weight
- 青灯夜游Original
- 2021-12-09 13:45:171813browse
CSS weight refers to the priority of the style, which determines how the CSS rules are parsed by the browser until they take effect; when two or more styles act on an element, the style with the higher weight will affect the element. Function, and with the same weight, the style written later will overwrite the style written earlier.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS weight refers to the priority of the style. There are two or more styles that act on an element. The style with the higher weight acts on the element. If the weight is the same, the style written later will overwrite the previous one. Writing style.
The weight determines how your css rules are parsed by the browser until they take effect. "CSS weight is related to how your CSS rules are displayed."
When many rules are applied to a certain element, weight is a process that determines which rule takes effect, or the priority.
Each selector has its own weight. Each of your CSS rules contains a weight level. This level is calculated by weighting different selectors. Through weights, different styles will eventually be applied to your web pages.
If two selectors are applied to an element at the same time, the one with the higher weight will take effect.
Basic rules for weight
1. Same weight: The selector that appears later is the final rule (for example, if you write the same two Each style #content h1 {color:red} )
2. Different weights, the higher the weight value will take effect
3.! important (infinite) > Inline style (weight 1000) > id selector (weight 100) > class selector (10) = pseudo-class selector (10) = attribute selector (10) > element selector (1)>Universal selector (0)>Inherited style>Browser default style.
4. The sum of element selectors will never have as much weight as class selectors.
The selector may contain one or more calculation points related to the weight. If the calculated weight value is larger, the weight of the selector is considered to be higher
css Weight calculation
If multiple selectors of different types set styles for an object at the same time, how the object will display the final style is given below. A simple calculation method is given below. For regular selectors they all have a priority weighted value, as explained below.
Tag selector: Priority weighted value is 1.
Pseudo-element or pseudo-object selector: priority weighted value is 1.
Class selector: Priority weighted value is 10.
Attribute selector: Priority weighted value is 10.
ID selector: Priority weighted value is 100.
Other selectors: the priority weighting value is 0, such as wildcard selectors, etc.
Then, use the above weighted value number as a starting point to calculate the total weighted value of the selector in each style. The calculation rules are as follows:
Count the number of ID selectors in the selector, and then multiply by 100.
Count the number of class selectors in the selector, and then multiply it by 10.
Count the number of tag selectors in the selector, and then multiply it by 1.
Follow this method, and finally add up all the weighted values to get the total weighted value of the current selector. Finally, based on the weighted value, decide which style has the higher priority.
For a composite selector that is composed of multiple selectors, first calculate the weighted value of each component selector separately, then add it up to get the total score of the current selector, and finally based on the selector's The higher the score, the higher the priority, and the style set by it will be applied.
If the scores are the same, the judgment will be based on the positional relationship, and the style close to the object should have high priority.
[Example] Use different compound selectors to set style attributes for the same element through inline styles, and compare it through priority rules to get the final style attribute value.
<!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>The page effect is as shown below.
In the above example, check the browser effect and analyze the code step by step. What you need to pay attention to is when testing: when testing each step below, the following code needs to be deleted, so The browser displays the results multiple times, and the browser displays the results at each step.
Step 1
To achieve browser centering, set the element centering attribute margin: 0 auto; and the text centering attribute text-align:center; for the div tag.
div { margin: 0 auto; text-align: center; }Step 2
Set the width of the Cent layer to 400 pixels. If there is no width setting, the centering on the browser will also be invalid. , then set the inner spacing in 4 directions, and finally set the 1 pixel color to a pink dotted border line.
.Cent{ width: 400px; border: 1px dashed #CC0099; padding:10px 15px; }Step 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、文本左对齐，上一步的加粗设置如果字体大小无效，则查看加粗结果，行高设置使用相对单位，这样可以避免字体大小的改变而影响原先段落文字之间的距离。
段落内的 标签设置字体颜色为 #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 命令将 字体大小设置为 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视频教程）
The above is the detailed content of What is the significance of css weight. For more information, please follow other related articles on the PHP Chinese website!