Three major features of CSS you must know

This time I will bring you the three major features of CSS that you must know, and what are the precautions for using the three major features of CSS. The following is a practical case, let’s take a look.

Three major features of CSS: inheritance, cascading, priority

1. Inheritance

1. What is inheritance?

Function: to parent Elements set some attributes, which can also be used by sub-elements. We call this inheritance

Note:

1. Not all attributes can be inherited, only those with can be inherited

2. In CSS inheritance, not only sons can inherit, but also descendants

3.Speciality in inheritance

3.1 The text color and underline of the a tag cannot be inherited (that is to say, it cannot be inherited through Obtain)

3.2 The text size of the h tag cannot be inherited (that is to say, it cannot be obtained through inheritance)

Application scenarios:

Generally used to set some common information on the web page, such as the text color, font, text size, etc. of the web page;
body{} >>> Common information is generally set in the body

2. Cascading

1. What is cascading?

Function: Cascading is the ability of CSS to handle conflicts

Notes:

Cascading will only occur if "the same label" is selected in multiple selectors and then the "same attribute" is set.

CSS full name Cascading StyleSheet (Cascading Style Sheet )

For example:

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

3. Priority

1.What is priority?

Function: When multiple selectors select the same tag, and when the same attribute is set to the same tag, how to cascade is determined by the priority

2. Three ways of priority judgment

2.1 Indirect selection refers to inheritance
If it is indirect selection, then whoever is closer to the target label will listen.

2.2 Same selector (direct selection)
If they are all directly selected, and they are all the same type of selector, Then whoever writes it later will listen to it

2.3 Different selectors (direct selection)
If they are all directly selected and are not the same type of selector, then the priority of the selector will be followed To cascade:

id>class>tag>wildcard>inheritance>browser default

id>class>label>pass>continue>browse

4. !important

1. What is !important

Function: Used to increase the priority of an attribute in a selector that directly selects a tag, you can The priority of the specified attribute is raised to the highest

Notes:

1.!important can only be used for direct selection, cannot be used for indirect selection

2. The tag selected by the wildcard selector is also directly selected, and you can also use !important to increase the priority

3.!important can only increase the priority of the specified attribute, and other The priority of the attribute will not be increased

4.!important must be written before the semicolon of the attribute value

5.!The exclamation point before important cannot be omitted

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

5. Weight of priority

1. What is the weight of priority?

Function: When multiple selectors are mixed together, we can determine who has the highest priority by calculating the weight

2. Weight calculation rules

2.1 First calculate how many ids there are in the selector. The selector with more ids has the highest priority

2.2 If the number of ids If the number of class names is the same, then look at the number of class names. The one with more class names has the highest priority

2.3 If the number of class names is the same, then look at the number of tag names. The number of tag names The one with more has the highest priority

2.4 If the number of ids is the same, the number of class names is the same, and the number of tag names is the same, then the calculation will not continue, so who writes at the end? Whoever listens
That is to say, if the priorities are the same, then whoever writes next listens to whom

Note:

1). This is only required if the selector directly selects the tag. Calculate the weight, otherwise it will definitely listen to the directly selected selector;

2). The weight of the wildcard is 0

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!

Recommended reading:

How to load HTMLString in iOS webView

html5 little knowledge that is easily overlooked

The above is the detailed content of Three major features of CSS you must know. For more information, please follow other related articles on the PHP Chinese website!