First explain the priority of styles. There are three styles:
1. External style sheet
Example:
<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
2. Internal style sheet
Example:
<head> <style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head>
3. Inline style
Example:
<h1 style="color:blue">样式测试</h1>
Although inline styles can flexibly change the style of a certain tag independently, it is still recommended not to use inline styles as much as possible. Because although this is more intuitive, it does not conform to the design idea of separation of structure and performance.
Generally speaking, the priority of the above three styles is as follows:
Inline style>Internal style>External style
Priority of selector :
The types of selectors can be divided into three types, namely:
1. Tag name selector such as h1{}.
2. Class selector such as .test{}.
3.ID selector such as #test{}.
At the same time, you need to consider the inline style sheet, that is, writing inside the tag.
Here we use the numbers 1000, 100, 10, 1 to represent the weights of the above three selectors and inline style sheets. The larger the number, the greater the weight, which means the higher the priority.
The weights of each selector are as follows:
1. The weight of the inline style sheet is the highest, set to 1000;
2. The weight of the ID selector is second. , set to 100
3. The weight of the Class class selector is third, set to 10
4. The weight of the HTML tag selector is the lowest, set to 1
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
The results displayed on Firefox, IE10, and Chrome browser pages are as follows:
The content within the tag is displayed in red
The content within the tag is displayed in yellow
The last In addition, in the same set of attribute settings, the rules marked with "!important" have the highest priority. The example is as follows: <head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
The page display results in Firefox, IE10, and Chrome are as follows:
The content in the
tag is displayed in red
Other supplements:
1. The greater the weight of the selector, the higher the priority;
2. When the weights are equal, the style sheet settings that appear later will be higher than those that appear first. The style sheet setting that appears has a higher priority;
3. The inherited CSS style has a lower priority than the CSS style specified later
4. The descendant selector and group selector are the tag names. The extended applications of selectors, class selectors and ID selectors will not be introduced here.
First explain the priority of styles. There are three styles:
1. External style sheet
Example:
<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
2. Internal style sheet
Example:
<head> <style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head>
3. Inline style (Inline style)
Example:
<h1 style="color:blue">样式测试</h1>
Although inline styles can flexibly change the style of a certain label independently, it is still recommended not to use inline styles as much as possible. Because although this is more intuitive, it does not conform to the design idea of separation of structure and performance.
Generally speaking, the priority of the above three styles is as follows:
Inline style>Internal style>External style
Priority of selector :
The types of selectors can be divided into three types, namely:
1. Tag name selector such as h1{}.
2. Class selector such as .test{}.
3.ID selector such as #test{}.
At the same time, you need to consider the inline style sheet, that is, writing inside the tag.
Here we use the numbers 1000, 100, 10, 1 to represent the weights of the above three selectors and inline style sheets. The larger the number, the greater the weight, which means the higher the priority.
The weights of each selector are as follows:
1. The weight of the inline style sheet is the highest, set to 1000;
2. The weight of the ID selector is second. , set to 100
3. The weight of the Class class selector is third, set to 10
4. The weight of the HTML tag selector is the lowest, set to 1
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
The results displayed on Firefox, IE10, and Chrome browser pages are as follows:
The content within the tag is displayed in red
The content within the tag is displayed in yellow
The last 另外在同一组属性设置中标有“!important”规则的优先级最大，示例如下： <head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
在火狐，IE10，Chrome浏览器页面显示结果如下：
标签里的内容显示为红色
其他补充：
1.选择器的权值越大优先级越高；
2.当权值相等时，后出现的样式表设置比先出现的样式表设置优先级高；
3.继承的CSS 样式优先级低于后来指定的CSS 样式
4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用，在此就不介绍了。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
