Css structure and overlapping selector particularity

When css is used to declare styles for html documents, generally (that is, the developer and user agent-browser-are considered only, the final embodiment of the page style is the final cooperation result between the style written by the developer and the default style of the browser. In fact, at a relatively low level, the style of the user agent does not need to be taken into account. First, the style of the user agent is generally a basic style such as display, it is not the most meaningful color and float styles on the web page. Second, it is because the style of the user agent is always preferred compared with the style of the developer.

Therefore, in terms of processing styles in basic hml documents (normally), we can clearly figure out the embedded pages, inner links, and external links to better display webpages.

In this general case, the css style Declaration has a problem, that is, the special nature of the selector (as shown below ): use different selectors to select the same div element and declare the style, and some style declarations are repeated, because the style Declaration can only take one value, for example, the background can only be one color. Therefore, before applying a style, we must first compare these selectors. The comparison method is to convert the selectors into numerical values according to certain rules, compare the values, and win when the values are large, the style declaration corresponding to this selector will also be executed first to overwrite the same declaration in other selectors.

<Style type = "text/css"> * {background: black; color: # fff;}/* 0.0.0.0 */div {background: blue; width: 100px; height: 100px;}/* 0.0.0.1 */. myDiv {background: yellow;}/* 0.0.1.0 */body div {background: green;}/* 0.0.0.0 */# myDiv {background: red; /* 0.1.0.0 */} </style> <div id = "myDiv" class = "myDiv"> Test Box </div>

 

The above code is used as an example:

First, define the conversion rules (the premise of the comparison selector-convert it to a value ):

(1) The id selector is 0.1.0.0;

(2) class. The pseudo-class selector is 0.0.1.0;

(3) element tag. The pseudo element is 0.0.0.1;

(4) wildcard * Is 0.0.0.0

According to this rule, convert the above style as follows:

*{ background: black;   color:#fff;}/*0.0.0.0*/div{ background: blue;     width: 100px;     height: 100px;}/*0.0.0.1*/.myDiv{ background: yellow;} /*0.0.1.0*/   body div{ background: green;}/*0.0.0.0*/#myDiv { background: red;/*0.1.0.0*/}

It can be seen that # myDiv has the largest value. Therefore, when assigning values to the repeated style declaration background, {background: red;} is preferentially selected, and the background color is red. Therefore, the special nature of the selector is for the situation where "the same or some elements adopt different selector for style declaration and contain repeated declarations.

2. Pay attention to the special features! Important declaration and inline style.

(1) When the label itself contains the style attribute, that is, when the inline style exists, the inline style and the selector style (embedded and external chain) conflict with each other, the inline style takes precedence, although the style is not declared by selector, its special value is 1.0.0.0.

(2 )! Important Declaration. Format: Selector {Declaration: Declaration value! Important;}. Example: myDiv {background: yellow! Important;}, which takes precedence over all styles including inline styles. As shown in the preceding code

. MyDiv {background: yellow;} is replaced by. myDiv {background: yellow! Important;} Then, the final background color will be yellow.