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 id="样式测试">样式测试</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 id="样式测试">样式测试</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选择器的扩展应用，在此就不介绍了。
How do you insert an image into an HTML page?May 04, 2025 am 12:02 AMToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc
HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AMThe core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.
Why are HTML tags important for web development?May 02, 2025 am 12:03 AMHTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.
Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AMA consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.
How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PMSolution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...
How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PMHow to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...
How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PMThe default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.
What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PMPotential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
WebStorm Mac version
Useful JavaScript development tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Zend Studio 13.0.1
Powerful PHP integrated development environment
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
