CSS-read Essay 2 (combination of selector and priority/weight), css essay

CSS-read Essay 2 (combination of selector and priority/weight), css essay

After knowing the most basic knowledge of CSS delimiters, we need to make full use of them. Here we will record several common usage cases.

1. targeted use of class selector or ID Selector

The class selector may be applied in different places on a page, so you need to use the class selector in a targeted manner. For example:

1 <! DOCTYPE html> 2 This example defines a. myContent css class and the combination selector p. myContent ( Note that p and. myContent do not have spacesAnd the div, p, and span elements in the page also reference the myContent class. myContent, so the text of div and span will be blue, and the text in p will be red, as shown in the following figure:

In this application, the ID selector is similar to the class selector. You only need to replace. With # (p # myId), as shown in the following example.

1 <! DOCTYPE html> 2 The running results are the same.

2. Select the operator Group

Multiple identical definitions are selected and, in the following example, p and class delimiters. myContent and id selector # myId is defined as red, bold, underlined, and 25 PX text.P,. myContent, # myId {property: value;}. Note that they are separated by commas.

1 <! DOCTYPE html> 2 The running result is as follows:

3. CSS priority

Multiple Styles: if external Styles, internal Styles, and inline Styles are applied to the same element at the same time, Multiple Styles are used. Generally, the priority is as follows:

Marked! Important style>Embedded style (style in HTML element)> internal style sheet (style in head)> external style sheet (introduced externally in head)> browser default style

For example:

1 <! DOCTYPE html> 2 Although the text style color in the p label is set to red in the head style, the color of the p element in the HTML is set (blue) through the style attribute ). Because the embedded style has a higher priority than the internal style table, the text in the p label is displayed in blue, as shown in.

4. CSS weight

To more accurately determine which CSS is used when multiple styles modify the same element, you can use the weight Weighting Method to assign weight to each type of selector, then calculate the weighted weight of the selected character combination, and the final sum of points obtained is the final style.

• Label selector, pseudo class, and pseudo object: The weight is 1.
• Class selector and attribute selector: The weight is 10.
• ID selector: weight is 100.
• Inline style attribute: weight is 1000.
• ! Important: The weight is infinite.

Example:

1 <! DOCTYPE html> 2 Analysis: in the Code, the weighted credits of each selector are as follows:

p=1

p.myColor=1+10=11

.myColor=10

#myId=100

Style = "color: red" = 1000.

Therefore, "Hello" is blue (p = 1); "css is very powerful, you can control the style of any element on the page" is black (p. myColor = 1 + 10 = 11); "1 synchronize with the world, make a p st page child" Green (# myId = 100 ); "2. Let's see how amazing css is." It's red (style = "color: red" = 1000), as shown in.

5.css import Sequence
In the style in the head, how does one define the order of styles (. myColor1 and. myColor2) and the order in which these classes are referenced in HTML element p? Let's do a test.
A. first, first define it in the head style. myColor1, and then define. myColor2; then two classes are introduced in p, but the order is different <p class = "myColor1 myColor2"> css is very powerful, you can control the style of any element on the page </p> <p class = "myColor2 myColor1"> 1. synchronize with the world and create a page. </p> the code is as follows:

1 <! DOCTYPE html> 2

The running result is as follows:

B. first, first define it in the head style. myColor2, and then define. myColor1; then two classes are introduced in p, but the order is different <p class = "myColor1 myColor2"> css is very powerful, you can control the style of any element on the page </p> <p class = "myColor2 myColor1"> 1. synchronize with the world and create a page. </p> the code is as follows:

1 <! DOCTYPE html> 2 The running result is as follows:

The above two sets of experiments show that css is only related to the defined sequence, but not to the referenced sequence in the element, and the subsequent style will overwrite the previously defined style, in fact, this is why css is called a style cascade table.