CSS Specificity
As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence (Priority). Nettuts recently had a nice article in which the point values for css were explained. They are like so:
Elements - 1 points
Classes - 10 points
Identifiers - 100 points
Inline Styling - 1000 points
Why in doubt, get more specific with your style declarations(declaration). You can also use the !important declaration for debugging(debugging) purposes if needed.
Read more about css specificity:
HTML Dog on Specificity
Smashing Magazine on CSS Specificity
中文:
Many people have asked me about CSS. After setting the CSS, it has no effect, the style is invalid, and the style conflicts.
This kind of problem usually happens to novices. In many cases, CSS is ignored. The weight specificity in
I try to summarize some rules, algorithms and examples about specificity
I hope it will be helpful to newcomers~!
Author: Sun Jia (http://www.sjweb.cn/ The link seems to be unavailable)
About CSS specificity
CSS’s specificity characteristics or extraordinary characteristics, it is a measure of a measure A standard for CSS value priority. Since it is a standard, it has a set of relevant determination regulations and calculation methods. Specificity is represented by a four-digit number string (CSS2 is three digits), which is more like four levels, with values from left to right. To the right, the one on the left is the largest, one level is greater than one level, there is no base between the digits, and the levels cannot be surpassed.
When multiple selectors are applied to the same element, the one with the highest Specificity value will eventually get priority.
Selector Specificity value list
Selectors
| Syntax Samples Syntax | ensampleExample | SpecificityCharacteristics | ||||||||||||||||||||||||||||||||||||||||||||
| Universal Selector | * | *.div { width:560px;} | 0,0,0,0 | ||||||||||||||||||||||||||||||||||||||||||||
| E1 | td { font-size:12px;} | 0,0,0,1 | |||||||||||||||||||||||||||||||||||||||||||||
| Pseudo-classes Selectors | E1:link | a:link { font-size:12px;} | 0,0,1,0 | ||||||||||||||||||||||||||||||||||||||||||||
| Attribute Selectors | E1[attr] | h[title] {color:blue;}0,0,1,0 | |||||||||||||||||||||||||||||||||||||||||||||
| ID Selectors | #sID | #sj{ font-size:12px;} | 0,1,0,0 | ||||||||||||||||||||||||||||||||||||||||||||
| Class Selectors | E1.className | .sjweb{color:blue;} | 0,0,1,0 | ||||||||||||||||||||||||||||||||||||||||||||
| Child Selectors | E1 > E2 | body > p {color:blue;} | E1 E2 | ||||||||||||||||||||||||||||||||||||||||||||
| Adjacent Sibling Selectors | E1 E2 | div p {color:blue;} | E1 E2 | ||||||||||||||||||||||||||||||||||||||||||||
| Selector Grouping (Grouping) | E1,E2,E3 | .td1,a,body {color:blue;} | E1 E2 E3 | ||||||||||||||||||||||||||||||||||||||||||||
| Contains selectors (Descendant Selectors) | E1 E2 | table td {color:blue;} | E1 E2 |
Rules:
1. The inline style priority Specificity value is 1,0,0,0, which is higher than the external definition.
For example:
