Quote:

Yesterday copy write wechat circle of friends page, like the small love using iconfont love icon, write CSS to change the love and the back of the wechat nickname the same size, but no matter how I in my code on the magic change, is not to change the size of the love, heart plug ~

Iconfont CSS file used in the back! Important, according to my vague impression, I know that may be for this reason, so I can not change the size of the love; Checked the information to confirm once, used! Important attributes will now have a priority of NO.1, overtaking hordes of demons. So I added my own CSS! Important, and then my love becomes smaller, Perfect~

So the question arises: we want a small love, but it shows a big love. Why is it not the effect we want? When we wrote the page, we wrote a bunch of styles. Why does it look like this? Why not other styles? The question can be reduced to the following q&A:

Q: How do I know what the CSS style of an element is?

A: The concepts of cascading, inheritance, and priority work together to control what the CSS style of an element looks like.

​

Next, let’s discuss how if there are multiple CSS styles applied to an element, one style is displayed and another is not.

1, cascade

The concept of cascading is that the following CSS styles overwrite the previous CSS styles for the same element if their priorities are equal.

First, we have the following code and effects:

<div class="container">
    <div class="area"></div>
</div>
Copy the code
.area{
    width: 50px;
    height: 50px;
    background-color: red;
}
Copy the code

The effect of adding a style code:

.area{
    width: 50px;
    height: 50px;
    background-color: red;
}
.area{
    background-color: green;
}
Copy the code

The result is green overlaid with red, and the pattern ends up in green (forgive).

So the cascade affects the style of presentation;


2, inheritance,

The concept of inheritance is that a child element inherits certain attributes from its parent element and behaves the same way as its parent element.

It is important to note that some elements can be inherited (eg: color, font-family), while others cannot (eg: height, width).

First, we have the following code and effects:

<div class="container">
    <div class="area"></div>
</div>
Copy the code
.container{
    color:green;;
}
Copy the code

The font color in the child element inherits the parent element’s font color, so the font color in both children is green;

Add a different color to the child element’s font:

.container{
    color:green;;
}
.area{
    color:red;
}
Copy the code

We know that when no attribute is assigned to a child element, the child element inherits the attribute from the parent element.

So inheritance affects the style of presentation;


3, the priority of the selector


  1. What is the priority of a selector?

    When an element has multiple styles set by different selectors, which style the browser applies depends on the priority of the selectors. As follows:

    <div class="container">
    <span class="area" id="area"></span>
</div>
Copy the code
    #area{
    background-color:green;
}
span{
    background-color: yellow;
}
.area{
    background-color:red;
}
Copy the code

    The final style is shown in green:

    This is because the ID selector has a high priority, so it is green;


  1. How to determine the size of selector priority?

    • Here’s the rule:

      The priority of a selector is represented by a four-part number, the digit on the left of the number having a higher priority than the digit on the right of the number;

      For example, (1,0,0,0) has a higher priority than (0,11,0,0);

      Note: The priority of selectors is compared only if both selectors act on the same HTML element;

    • The priority of the selector is calculated as follows:

      • Add 1 to the first bit: If an element has an inline style, even though there is no selector, this bit is always 1 when it has an inline style.
      • Second bit + 1: if the selector contains an ID selector;
      • Third bit plus 1: if the selector contains a class selector, pseudo-class selector, or property selector;
      • Fourth bit + 1: if the selector contains an element selector or pseudo-element selector;

      Note: universal selector (*), combination operators (+, >, ~, ‘ ‘), and negative pseudo-classes (: not) priority would not be affected.

    • Here are some examples (in the following example, both selectors are applied to the same element, so consider them in terms of inheritance when applied to different elements) :

      1. There is the following code

        <div class="a1">
    <div class="a2">
        <div class="a3">
            <div class="a4" id="a">
            </div>
        </div>
    </div>
</div>
Copy the code
        .a1>.a2>div:first-child{
    background-color: pink;
}/* the priority is (0,0,3,1)*/
#a{
    background-color: yellow;
}/* the priority is (0,1,0,0)*/
Copy the code

        Because (0,1,0,0) has a higher priority than (0,0,3,1), the browser displays the style in yellow:

      2. There is the following code

        <div class="a1">
    <div class="a2">
        <div class="a3">
            <div class="a4">
                <div class="a5">
                    <div class="a6">
                        <div class="a7">
                            <div class="a8">
                                <div class="a9">
                                    <div class="a10">
                                        <div class="a11" id="a"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copy the code
        #a{
    background-color: green;
}/* the priority is (0,1,0,0)*/
.a1>.a2>.a3>.a4>.a5>.a6>.a7>.a8>.a9>.a10>.a11{
    background-color: red;
}/* the priority is (0,0,11,0)*/
Copy the code

        Because (0,1,0,0) has a higher priority than (0,0,11,0), the browser displays the style in green:

      3. There is the following code

        <div class="a1 a2"> 
</div>
Copy the code
        .a2{
    background-color: blue;
}/* the priority is (0,0,1,0)*/
.a1{
    background-color: orange;
}/* the priority is (0,0,1,0)*/
Copy the code

        Because the two selectors have the same priority, the browser displays orange by cascading:

      In fact, we have a simple idea to roughly determine the priority of the selector:

      It can be said colloquically that whichever selector uniquely identifies an element has a higher priority;

      (eg: since an element can only have one id but can have multiple classes, an id identifies a unique element, but a class does not; so the id selector has a higher priority than the class selector;)


  1. Special attention! important

    From the previous I tuned heart: heart: experience can know, use! Important can raise the priority of the corresponding CSS code above the priority of all selectors;

    Note:

    • Note that the priority is for the same attribute

      Width :100px; If width:200px! important; Will not work;)

    • Use! Important can cause trouble. Avoid it.