CSS Basic concepts (basic CSS concepts) Three, resolve style conflicts

Iii. Resolving style conflicts (resolving style Conflicts)

　　　　In the process of creating a style sheet, it is likely that many different rules will apply to the same element. For example, if one rule applies to all paragraph elements and another rule applies to all elements that have a class property with an emergency value, which rule should be used?

when it happens, these two rules will apply. if different rules contain declarations that deal with different attributes, then there is no conflict and the styles are "grouped together". However, if there are different rules that attempt to set the declaration of a value for the same property, then there is a mechanism to decide which styles will be used. For example, suppose you have the following three rules:div#aside H1 {color:red; margin:0.5em;}h1.title {color:purple; font-weight:bold; margin-left:3em;}H1 {color:gray; font-style:italic;}Now assume that the file contains a H1 element that is matched by the above three rules. What style should it show? There are three color values that contradict each other, and the values of their margins also conflict.We assume that the H1 should be red, bold , italic, and the value 0.5em above, right, bottom, and left margin is the answer . Then we have overturned the color:purple and color:red and Margin-left:3em's statement. The mechanism in which we get this answer is further explained in the next section. I. Cascade rule (Cascade rules)When you decide to use the style of a document, some declarations may conflict with each other. For example, if two different declarations require that all paragraphs be red or blue, then you should use the one that defines the color. The process of describing this is illustrated by cascading. The cascading rules are as follows: 1. For the target media type, look for all claims that apply to the element and attribute of the problem (that is, do not use the print media style if the current media is a screen). If the associated selector matches the element in the problem, the claim is applied. Therefore, when and only if the document contains one or more h6 element rules H6{color:navy;} . 2. Statements are primarily prioritized by source and weight . source refers to the source of the declaration from : The author's style sheet, or the browser's internal style sheet ( hereinafter referred to as Default Style sheet ). the imported style sheet and the imported style sheet have the same source. Weight refers to the importance of a declaration. in a normal declaration, the author style takes precedence over the user-defined style sheet, which takes precedence over the default style sheet. "! Improtant ", the style of the user style sheet, takes precedence over the author style sheet prior to the default style sheet. The "!important" declaration takes precedence over the normal declaration. You can see more details about "important" later in this chapter. The following priority levels are added in turn:

Browser user agent default style sheet (user agent stylesheet)

User-defined Normal style sheet declarations (normal)

Developer Normal style sheet author declarations (normal)

Developer-critical style sheets author declarations (!important)

User-defined important style sheets for users declarations (!important)

3. The second category is due to the specificity of the detector itself, and more specific choices will take precedence over the general selection. Pseudo-elements and pseudo-classes are computed as normal elements and classes, respectively. You can see more details about "specific calculations" later in this chapter.

4. Finally, sort by the order specified: If two rules have the same weight, origin, and specificity, the last specified rule wins. Any embedded style sheet rule is considered to be the rule placed before the imported style sheet.

Ii. specific calculations (specificity calculation)

Each selector in the CSS is assigned a specific characteristic. The actual specificity is calculated based on the composition of the selector itself, with the following rules:

1. Count the number of ID selectors in the selector (= a)

2. Calculate the number of other selectors and pseudo-class selectors (= B)

3. Calculate the number of type selectors (= c)

4. Ignoring pseudo-class elements

Connect three values (A-B-C) to get a specific value. Note that these values are not in decimal. Therefore, although 0-0-11 and 0-1-0 can be expressed as "11" and "10" respectively, compared with the former is less than the latter. It is for this reason that the author encourages the use of specificity as a list of three "," or three numbers separated by a character. For example:

H1{color:black;} /* Specifications =0-0-1 */

Div ul Li{color:gray;} /* Specifications =0-0-3 */

Pre.example{color:white;} /* Specifications =0-1-1 */

Div.help H1 Em.term{color:black;} /* Specifications =0-2-3 */

#title {color:black;} /* Specifications =1-0-0 */

Body Ul#first li Ol.steps li{color:black;} /* Specifications =1-1-5 */

as in the "cascading rules" detailed in the previous section, specificity is more important than the order in which rules are written. Therefore, if the following two selectors match the same element, the second conflicting declaration will be overwritten from the original declaration. div.credits{text-align:center; color:gray;} /* Specifications =0-1-1 */
Div {text-align:left; color:black;} /* Specifications =0-0-1 * /Therefore, elements that are matched by the above two rules will have a gray, text-centered effect. For selectors that do not have a tag-related specificity, the important declaration is always greater than the normal declaration (the next section will have more details). Iii. Importance (importance)It is important to declare that the declaration can be marked with!important. For important claims that will be applied, it is not a rule for a selector or a whole.　　　　For example: p {color:red; background:yellow!important; font-family:serif;} In this case, only the declaration of background is important, and the remaining two statements are not important.　　　　If there are two or more important declarations in the same attribute, then a specific calculation should be used to resolve the conflict.　　　　h2 {color:red!important; font-style:italic;}           h2 {Color:green!important;} Because the color of both is an important declaration and the selector has the same specificity, the second style sheet should be used because its position is behind. Then the style of the H2 element will be a green italic, and the Font-style declaration is not affected in this case. Iv. Succession (inheritance)Many child elements have styles that can be inherited from a parent element, and any inherited style will be applied to an element, except that the element whose selector matches is a style that is reset by a rule.　　　　For example, consider the following rule: body{color:block;}　　　　P{color:green;} Given the above rules, all the paragraphs are colored green and the other elements will be colored black. Note that whether the original rule is important or specific can be overridden by the new rule to override the influence of the original rule style. For example: Div#summary{color:blank!　　　　important;}　　　　p {color:green;}　　　　All paragraphs belonging to the DIV in the id attribute value of summary will be green, because the specified style overrides the inherited style. However, all attributes (except the page) can be given an inherited value. This instructs the browser to first determine the value of the parent element property and apply the value to the current element. therefore, P{color:inherit;} Sets the value of any paragraph to the color value of its parent element. The advantage of this inheritance mechanism is that it can clearly specify the relationship of inheritance, rather than relying on the normal inheritance mechanism as "guarantee". Five, shorthand attributes (shorthand properties)CSS has some properties that can be abbreviated. In other words, they are a larger collection of properties. For example, margin is shorthand for the Margin-top,margin-right,margin-top,margin-bottom property. The following two rules will have the same effect: p {margin:1em;}　　p {margin-top:1em;　　Margin-right:1em;　　Margin-bottom:1em;　　　　Margin-left:1em;} Therefore, the author must avoid conflicts between attributes and abbreviations, or between two shorthand attributes. For example, consider the effect of the following two rules on matching elements: pre.example {margin:1em;}　　　　Pre{margin-left:3em;} Consider cascading operations, including the left margin of any pre element with the class name example and all margins 1em.　　　　The effect of the shorthand property already overrides the value defined in the pre rule. Another good case is text-decoration, which is an attribute that behaves like an abbreviated attribute but not an abbreviation attribute. Consider the following rules:H2{text-decoration:overline;}
H2,h3{text-decoration:underline;}In view of the above rules, the H2 elements used will be underlined instead of drawn lines. H2 the value of the specified text decoration is not supported because the combination gives it a new keyword. If you need to decorate H2 elements with underscores and lines, then the necessary rules:h2 {Text-decoration:underline overline;}The following table summarizes the shorthand properties in CSS and the attributes that they represent. The shorthand attribute represents background background-attachment, Background-color, Background-image,background-position, Background-repeatborder Border-color, Border-style, Border-widthborder-top Border-top-color, Border-top-style, Border-top-width border-right border-right-color, border-right-style, border-right-widthborder-left border-left-color, border-top-style, border-left-width border-bottom border-bottom-color, border-bottom-style, border-bottom -widthCue Cue-before, Cue-afterfont font-family, font-size, Font-style, Font-weight, Font-variant,line-height (Font-size-adjust and Font-stretch will be added later)Order: font-style | font-variant | font-weight | font-size | line-height | font-family List-style list-style-image, list-style-position, List-style-typemargin Margin-top, Margin-right, Margin-bottom, Margin-leftoutline Outline-color, Outline-style, Outline-widthpadding padding-top, padding-right, Padding-bottom, Padding-leftpause Pause-after, Pause-before

CSS Basic concepts (basic CSS concepts) Three, resolve style conflicts