Understanding HTML CSS Selector actions and features

Child Selector

In CSS stylesheets, sometimes we need to make a selection for a selector, for example, to set the <span> tag under a paragraph label (the <span> tag must be the first generation of sub-elements under the paragraph tag, meaning that the middle does not contain another tag nesting), This is the time to use a sub-selector.

code example:

p>span{

font-size:20px;

}

">" is called a sub-selector, it is the role of the tag selector under the first generation of sub-elements of the <span> tag text style is set to font size 20px, but this is obviously not very flexible, can only select the child generation of the label element, if I need to select multi-generation sub-tags, You need to change it in a very troublesome order.

Include selector

Understand the sub-selector, including the selector is also understood, it is used to select the specified tag element under the descendants of the element, you can leapfrog the specified, rather than the direct descendants of the element.

The use of the two selectors, depending on the situation, does not include selectors more convenient to use all, just as the application of more constants in the development of the program is more robust, the selector is the case, choose the right time to choose a different selector.

Group Selector

If there is a style, you want to give multiple tags at the same time, you can give them to modify the same class, ID, but this is very cumbersome, and the ID selector can only be set once, so this time need to use the group selector, through the symbol "," (without double quotes), you can have multiple selectors using the same style.

code example

P, span{

font-size:20px;

}

Pseudo-Class selectors

This if used very much is this, said with very little, also not too, mainly is browser compatibility is a big problem, the evil ie ((╯‵-′) ╯︵┻━┻), so give you a simple introduction of a more commonly used, but also you open the page every day will encounter, do not worry about browser compatibility style.

a:hover{

color:red;

}

This sentence through the above study should be well understood, that is, <a> tags, modify the color, and hover means that when the mouse slide, a:hover belongs to a certain state of the label, so called Pseudo-class selector.

There is something called Universal selector, this I did not carefully say, is the selector part of nothing to write, with a * instead, it will default to select all the tags, the actual effect is not very large.

Several property inheritance of CSS

This inheritance is not an object-oriented wrapper inheritance polymorphic inheritance, in my understanding should be a label and its sub-tags in common, in the object-oriented language of the subclass will fully inherit the parent class open interface and member variables, and in HTML is the parent class label style modification, some rules will be passed to the child label ( Not all of the rules are available). Attributes such as color. More detailed rules, everyone on their own Baidu, after all, learning is also a process in the search, common can inherit attributes such as font size, color and other text class attributes, can not inherit such as the border and so on.

Weighted value

This does not need to be understood, although there are more detailed values, but in fact, is a priority problem, in a nutshell, the tag Selector < class selector < ID selector (the size of the weight is also the same), that is, the ID selector is the highest priority, when the setting rule is can be overridden by the selector, But this is to be in the same type of CSS style table, that is, inline and inline-type ratio, external and external-type ratio. The weight of the inheritance is very low, it is not too much introduction.

Importance

Sometimes, we need to set a property to the highest weight, guaranteed that it will not be modified at the back, and this time write the!important on the back of the property. Such a property would be the highest weight, which is the highest priority.

code example:

Set up label <p class = "Wang" >

Style sheet Code

p{

Color:red!important;

}

p.class{

Color:green;

}

Although the code in the CSS style sheet later modified color is green, and P.class is a class selector, the weight is higher than the P tag Selector, but because the color property has been set to the highest weight, then the color will be red, if it is the back color:green; Plus! Important, then the color will turn green, because the weight is the sum of the principle, so the actual effect to look at the weight, and then see the cascading overlay (that is, the last CSS style sheet), if the weight of the same to see the cascading overlay.

Understanding HTML CSS Selector actions and features