There are four methods to call CSS: Intra-row style, embedded style, link type, and @ Import. at the same level, we can understand their priorities according to the principle of proximity, and the style defined beyond the previous will be overwritten by the subsequent style.
If two or more rules have the same priority when the first three rules are applied, the rule given later takes precedence over the rule given earlier. If the STYLE tag (specify embedded style) and link tag (specify link Style) are used in the head tag of a Web page ), in addition, the two styles have the same priority applied at the same time,The order of style and link tags determines the style priority.. For example, if the following style rule is defined in the link linked sample table (mycss.css:
H1 {color: Red}
A rule is also defined in the embedded style definition: h1 {color: yellow}
The style definition on the webpage is as follows:
<Head> <LINK rel = stylesheet href = "mycss.css" type = "text/CSS"> <style> <! -- H1 {color: yellow} --> </style>
Because the style defined in the STYLE tag appears later, it has a higher priority, so the content of the H1 tag in the webpage is displayed as yellow ). Similarly, if you move the link tag to the <style> </style> tag, the content of the H1 tag on the webpage will be displayed in red ). In addition, because the position of a directly inserted style (the style set by the style attribute marked with htnl) is closest to the identifier of the style, it usually has a high priority.
@ Import is inserted in the embedded system, but it has the lowest priority during the test. Therefore, when the browser loads the imported style sheet, the imported content is parsed first, so it is overwritten by the style at the same level.
In the case of the same level, the priority is: Intra-row style> embedded style = link type (who has the highest order and who has the highest priority)> @ import pilot type
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
