How to Understand CSS specificity

 

In addition to the floating feature, CSS specificity is also a difficult concept to understand in the style sheet. in general, why do you think some CSS rules that should be applied to elements are not applied by the browser. in order to spend as little time troubleshooting as possible, you need to understand how the browser interprets your styleCodeIn addition, you also need to systematically understand how the CSS specificity feature works. Similar to this type of problem, most of the reason is that another position in the style sheet defines a more special selector.

CSS specificity is not simple, but there is still a way to introduce it in a simple and intuitive way.

CSS specificity Overview

1. Specificity determines which CSS rules are applied to the client browser.
2. Priority is the reason that your CSS rules generally do not have some elements, including what you think should be applied.
3. Each selector has its own level.
4. If the two separator attributes are applied to the same element at the same time, the higher priority takes effect.
5. There are four obvious priority types: inline style, IDs, classes + attributes, and elements.
6. If you like Star Wars, you can see: CSS specificity wars.
7. If you like card games, you can see: CSS specificity for poker players
8. When the speficity value is equal, the operator is selected later.
9. When the speficity value is not equal, the selector with a higher speficity value takes effect.
10. The more specific the selector, the higher the priority level.
11. The final CSS rule will overwrite any previous or conflicting CSS rules.
12. The speficity value of the embedded style is higher than that of others.
13. The ID Identifier is higher than the speficity attribute identifier.
14. You can use IDs to increase the speficity value of the selector.
15. The class separator is higher than most element delimiters.
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.

In addition ,! Impant ant rules are higher than all rules, so use them with caution. The inherited style type does not participate in priority value calculation, which is lower than other rules.

Because each selector has its own excellent speficity value, let's look at the specific calculation rules:

• Inline style (embedded style), which is directly written in the element, plus, e. g. <H1 style = "color: # FFF;">
• IDS (ID selector), add 0, 1, 0, 0, e. g. # Div
• Classes + attributes (class selector, attribute selector, and pseudo class), plus, e. g .. classes, [attributes],: hover, # focus
• Elements (each element or pseudo element), plus 0, 0, 1. E. g.: firstchild
• Others (Other selector), plus 0, 0, 0. E. g. *>

How to calculate the speficity value?

• Remember how to calculate the speficity value. "starting from 0, add 1000 to the style attribute, add 100 to each ID, and add 10 to each attribute's selector, class, or pseudo class, add 1 to each element name or pseudo element. Therefore
  Body # content. Data IMG: hover
  The speficity value of is: 122 (0122, 100 or): To # Content, 10 to. Data, 10 to: hover, 1 to body, 1 to IMG ."
• You can also select a calculation method: calculate each ID selector (= A), calculate each attribute selector (= B), and calculate each element or pseudo element (= C ), connect the three values a-B-c to obtain the speficity value.
• The following figure shows how to calculate the speficity value.

Hands-on Test

1	*{}	0
2	Li {}	1 (one element)
3	Li: first-line {}	2 (one element, one pseudo-element)
4	Ul Li {}	2 (two elements)
5	Ul ol + Li {}	3 (three elements)
6	H1 + * [rel = up] {}	11 (one attribute, one element)
7	Ul ol Li. Red {}	13 (one class, three elements)
8	Li. Red. level {}	21 (two classes, one element)
9	Style = ""	1000 (one inline Styling)
10	P {}	1 (one HTML selector)
11	Div P {}	2 (two HTML selectors)
12	. SITH	10 (one class selector)
13	Div P. Sith {}	12 (two HTML selectors and a class selector)
14	# SITH	100 (one ID selector)
15	Body # Darkside. Sith P {}	112 (HTML selector, Id selector, class selector, HTML selector; 1 + 100 + 10 + 1)

About this entry

You're currently reading "How to understand CSS specificity," an entry on Jaybird

Published:

8.10.08/12 pm

Category:

Front-end

Tags:

CSS speficity

 

Http://www.smashingmagazine.com/2007/07/27/css-specificity-things-
You-shoshould-know/
Http://www.obird.net/web-standards/%E5%A6%82%E4
% BD % 95% E7 % 90% 86% E8 % A7 % A3css-specificity/