Home > Developer > Web Develop
Web development encountered many times about the style of alternative problems, so I want to find from the Internet posts and their own thought to do a simple regular.
Recommended article: Http://www.cnblogs.com/ccdc/p/2765827.html
Principle one: inline style, inner style, style, priority order
If an inline style is placed inside a style, the inner style is overwritten.
Ex
<HTML> <Head> <title>CSS Precedence</title> <styletype= "Text/css">. Priority{Color:#00ff00;} </style> </Head> <Body> <Divclass= "Priority">Notice</Div> </Body></HTML><Linkrel= "stylesheet"type= "Text/css"href= "/content/priority.css"><!--color: #ff0000; -
Results:
| Notice |
Principle two: Explicitly specify the elements that add styles, so that there are layers
Ex
<HTML><Head> <title>CSS Precedence</title> <styletype= "Text/css">Div P span.priority{Color:#00ff00;}/*1*/. Priority{Color:#ff0000;}/*2*/ </style></Head> <Body> <Div><P><spanclass= "Priority">Notice</span></P></Div> </Body></HTML>
Results: 1 should take precedence over notation 2.
| Notice |
Principle three: CSS selector features
| CSS Selector | Attribute value |
| ID Selector: # | 100 |
| ClassName:. | 10 |
| HTML Tags: span | 1 |
The example in principle two can also be explained as follows: The characteristic value of the 1 selector is 1+1+1+10=13, and the 1 selector has a value of 10. Obviously, depending on the size of the attribute value
It can be decided that 1 should take precedence over notation 2.
Principle Four:!important
In a set of style sheets, if the style has a declaration!important, the precedence is high.
Ex
<HTML> <Head> <title>CSS Precedence</title> <styletype= "Text/css">. Priority{Color:#ff0000;Color:#0000ff!important;} </style> </Head> <Body> <Div><P><spanclass= "Priority">Notice</span></P></Div> </Body></HTML>
Examples of these four principles are supported in Ie7~9,chrome,firefox,safari, Sogou, 360 browsers
Five: @import
Write this by the way. @import, the difference between @import and link is that @import load the page before loading the stylesheet, link loads the style sheet before loading the page. So in the case of slow speed
If you use @import to load the page, a running version of the moment will appear.
@import can only load style sheets, and cannot add attributes such as Rel,style like link.
Individuals do not recommend the use of @import
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
