Measure the test taker's knowledge about the operations and features of html css selectors.

Measure the test taker's knowledge about the operations and features of html css selectors.
Child Selector

In a CSS style sheet, we sometimes need to make another selection for a selector, for example, to set a style for the <span> label under a paragraph label (the <span> label must be the first child element under the paragraph label, that is, it does not contain other labels nested in the middle ), in this case, the sub-selector is used.

Sample Code:

P> span {

Font-size: 20px;

}

">" Is called a sub-selector. Its function is to set the text style in the <span> label of the first child element under the tag selector to a font size of 20 PX, but this is obviously not flexible, only the child generation label elements can be selected. If I need to select multiple child generations, it will take a lot of trouble to modify them one by one.

Include Selector

The sub-selector is easy to understand. It is used to select the next generation element under the specified tag element. It can be specified beyond the level, rather than directly descendant element.

The specific usage of the two selectors depends on the situation. It is not convenient to use them all, just as using more constants in program development will make the program more robust, and the same is true for the selector, select a proper time and select a different selector.

Group Selector

If you want to add multiple tags to a style, you can modify the same class and id for them. However, this is very cumbersome and the ID selector can only be set once, in this case, you need to use the group selector. The "," (no double quotation marks) symbol allows multiple selectors to use the same style at the same time.

Sample Code

P, span {

Font-size: 20px;

}

Pseudo-class selector

If this is the case, there are very few or no problems with browser compatibility, internet Explorer () has never been used before), so I would like to give you a brief introduction to a commonly used one that you will encounter every day when you open a Web page, there is no need to worry about the style of browser compatibility.

A: hover {

Color: red;

}

This sentence should be well understood through the above learning, that is, <a> label, modify the color, and hover means that when the mouse slides over,: hover belongs to a certain state of the tag, so it is called a pseudo-class selector.

There is a thing called a general selector. I did not elaborate on it, that is, the selector does not write anything. Instead, it will use a "*" instead, and all the labels will be selected by default. The actual function is not very great.

Inheritance of several css features

This inheritance is not an object-oriented encapsulation inheritance multi-state inheritance. In my understanding, it should be the commonality of tags and their sub-tags, in object-oriented language, subclasses fully inherit the open interfaces and member variables of the parent class. In HTML, after modifying the style of the parent class label, some rules are passed to sub-tags (not all rules are acceptable ). such as color. for more detailed rules, you can use Baidu. After all, learning is also a process of exploration. common attributes that can be inherited, such as font size and color, are textual attributes, not inherited, such as adding borders.

Weight

This does not need to be understood. Although there are more detailed values, it is actually a matter of priority, in simple terms, it is the tag selector <class selector <ID selector (the size of the weight is also the same), that is, the ID selector has the highest priority. When setting a rule, it can be overwritten by the selector, but this should be in the same type of css style table, that is to say, the inline style is compared with the inline style, and the external style is compared with the external style. the inherited weights are very low.

Importance

Sometimes, we need to set a property to the highest weight to ensure that it will not be modified later. At this time, we will write it behind the property! Important. This property will be the highest weight, that is, the highest priority.

Sample Code:

Set tags <p class = "wang">

Style Sheet code

P {

Color: red! Important;

}

P. class {

Color: green;

}

Although the color modified later in the css style sheet in the Code is green. the class is a class selector with a higher weight than the p tag selector. However, because the color attribute has been set to the highest weight, the color will be red. If it is the next color: green; also! Important, then the color will change to green, because the weight value is appended with the addition principle, so the actual effect should first look at the weight value, then see the stacked overwrite (that is, the final css style table ), if the weights are the same, stack overwrite is available.