Detailed explanation of CSS selector Weights

Document directory

• Reference Links:

Before we start, let's understand several concepts. The following is a piece of CSS code:

      a {        border-bottom: 0px;        color: #5DB0E6;      }      a:focus {        outline: 1px dotted #eee;      }      a:active {        outline: 0px;      }      a:hover {        color: #7bc4f4;      }      body#jq-interior {        background-image: url(http://static.jquery.com/files/rocker/images/bg-interior-tile-drk.jpg);      }

The style sheet above consists of style rules, and each style rule can be divided into two parts: Selector and declaration. The selector is equivalent to the jQuery selector and can be set for specific elements. CSS has a cascading style table. Basically, the child element of the selected element can inherit its style. However, if the child element has a style set, it can also be overwritten, it's like a slice. As layout tables fall behind in the form of layout, CSS is becoming more and more important. However, IE6's lack of CSS support and various layer-insensitive bugs, or some large websites use CSS unreasonably, and the volume of CSS expands. Maintaining them is a headache. We must understand the concept of weight to show elements the desired style. You can specify the weight based on the style rules or the selector. This is because there is an important identifier! Important can be placed at the end of the style declaration to ignore the weight level highlighted in this article. I think it is best not to use this item. First, IE6 does not support it well. To support it, you need to separate a style rule and write it. If you use more rules, the CSS weight level will be severely disrupted.

The introduction to CSS weight levels was first found in W3C. I heard that IE5 was the first to support CSS. Which one was earlier? Obviously, IE is not fully implemented based on it. In the chapter Calculating a selector's specificity, it roughly uses a, B, c, and d to evaluate the style rules and gives each score (1 or 0 ), however, no calculation method is provided for the final value.

• A: If the row style is applied to this element, it will assign this value to 1. How is the intra-row style? Is to use style = ".... "To set styles, I think this is a very stupid behavior, in vain to increase the size of the page, it is also very difficult to maintain, and the use of those elements that only express the style is similar, such as big, small, B, u, strike, etc. In this way, I personally think that the browser actually assigns a special ID for it (essentially, IE also assigns a uniqueId for each element on the page ), place it at the bottom of the style sheet, so no other style can overwrite it.
• B: The id selector is used to select a style rule. For example, the above body # jq-interior is a little cumbersome. I have read a lot of CSS selector implementations and my experience in selector. The body is completely unnecessary. A selector is equivalent to a selector group, which is composed of various selectors. The selector gets a string that conforms to the CSS selector structure. If it is smart enough, it performs trim operations on the string first and then scans to see if there is an id selector, if yes, the previous part will be cut off, and then the regular expression will be used to dismember it ...... In other words, the id selector is strongly exclusive, and only the parallel selector can tolerate it.
• C: whether the selector of a style rule has a class selector and a pseudo class selector (hover,: link,: active,: target ). These are basically CSS2.1. CSS3 adds a structure pseudo-class and a selection pseudo element, which does not damage the scoring system.
• D: The weight is the lowest. This refers to the existence of the tag selector and pseudo element in the selector. What is a pseudo element? The preceding figure shows: the object is a pseudo element. Note that early pseudo elements have only one colon, just like pseudo classes. This may be the result of w3c's painstaking efforts to separate them (css3 specifications.

So far, we know that the weight of a must be greater than B, while that of B must be smaller than c and d, but this is not easy to calculate, and it is hard to explain the subsequent examples. So I introduced another supplementary foreign solution out of this talented article named "CSS: Specificity Wars .. It regards abcd as a counting unit like arithmetic, 10, and, and multiply them by the last plus, so that the priority is clear at a glance. We can even convert them to the next intuitive graph.

Now, let's analyze the w3c example to see what extra information it can give us.

/* By situ is beautiful All rights reserve */* {}/* a = 0 B = 0 c = 0 d = 0-> specificity = 0, 0, 0 * // * the weight of the wildcard selector is 0. in IE, it cannot distinguish between element nodes and comment nodes */li {}/* a = 0 B = 0 c = 0 d = 1-> specificity =, 0, 1 * // * the label selector is 1 */li: first-line {}/* a = 0 B = 0 c = 0 d = 2-> specificity =, 0, 2 * // * the label selector and pseudo element are 1 */ul li {}/* a = 0 B = 0 c = 0 d = 2-> specificity = 0, 0, 2 * // * the concept of the descendant selector exists here, but when calculating the weight, a relationship selector like it will be further broken down as two tag selectors. */Ul ol + li {}/* a = 0 B = 0 c = 0 d = 3-> specificity =, * // * ignore the descendant selector and adjacent selector, only the selector component */h1 + * [rel = up] {}/* a = 0 B = 0 c = 1 d = 1-> specificity =, 1, 1 * // * the adjacent selector consists of the tag selector and attribute selector. The attribute selector is 10 */ul ol li. red {}/* a = 0 B = 0 c = 1 d = 3-> specificity =, * // * ignore the descendant selector, three tags and one class selector, the class (className) in the DOM is prominent, has a special getElementByClassName, the level is c, the total score is 13 */li. red. level {}/* a = 0 B = 0 c = 2 d = 1-> specificity = 0, 0, 2, 1 * // * two class selectors and one label selector, total score 21 */# x34y {}/* a = 0 B = 1 c = 0 d = 0-> specificity = 0, 0, 0 * // * getElementById, the fastest way to obtain elements on the page. The weight is B, score 100 */style = ""/* a = 1 B = 0 c = 0 d = 0-> specificity = 1000, * // * intra-row style, score, will overwrite the settings of internal or external styles */

Finally, we will summarize the weights of the top ten selectors and pseudo elements:

Selector	Expression or example	Description	Weight
ID Selector	# Aaa		100
Class Selector	. Aaa		10
Tag Selector	H1	TagName of the element	1
Attribute Selector	[Title]	For details, see here.	10
Adjacent Selector	Selecter + selecter	Split into two selectors for re-calculation
Elder brother Selector	Selecter ~ Selecter	Split into two selectors for re-calculation
Parent-Child Selector	Selecter> selecter	Split into two selectors for re-calculation
Descendant Selector	Selecter	Split into two selectors for re-calculation
Wildcard Selector	*		0
Various pseudo-class selectors	For example, link,: visited,: hover,: active,: target,: root,: not, etc.		10
Various pseudo elements	For example: first-letter,: first-line,: after,: before,: selection		1

Reference Links:

• Specificity at westciv
• Specificty for star wars fans
• Specificity at snook. ca
• Eric meyer on specificity
• CSS Structure and Rules