[three CSS features]: cascading, inheritance and priority

This study note is a personal summary of teacher Pink's course. Please indicate the source for reprint!

b station video link: https://www.bilibili.com/video/BV14J4114768.
Note reference boss: https://jerry-z-j-r.github.io/ (Note: sometimes not accessible)

[three CSS features] front end notes (5)

CSS has three very important features: cascading, inheritance and priority.

Lamination

If you set the same style for the same selector, one style will overwrite (cascade) another conflicting style. Cascading mainly solves the problem of style conflict.

Stacking principle:

  • For style conflict, the principle of proximity is followed. Whichever style is close to the structure will be executed
  • Styles do not conflict and do not cascade

Note: the nearest standard is: rear > front

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Lamination of three characteristics</title>
    <style>
        div {
            color: red;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- pink colour -->
    <div>Farmer's three fists</div>
</body>

</html>

Inheritance

Inheritance in reality: we inherited our father's last name.

Inheritance in CSS: a child tag inherits some styles of the parent tag, such as text color and font size. In a simple sense, a child inherits his father's business.

  • Proper use of inheritance can simplify code and reduce the complexity of CSS styles
  • The child element can inherit the style of the parent element (text -, font -, line - the attributes at the beginning of these elements can inherit, as well as the color attribute)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Inheritance of three characteristics</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>Farmer's three fists</p>
    </div>
</body>

</html>

Row height inheritance

body {
    font: 12px/1.5 'Microsoft YaHei';
}
  • The row height can follow the unit or not
  • If the child element does not have a row height set, the row height of the parent element will be inherited as 1.5
  • At this time, the row height of the child element is: the text size of the current element * 1.5
  • The line height of body is 1.5. The biggest advantage of this writing method is that the child elements can automatically adjust the line height according to the size of their own text
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Inheritance of three characteristics -- inheritance of line height</title>
    <style>
        body {
            color: pink;
            /* font: 12px/18px; */
            font: 12px/1.5;		/* 12 + 12 * 0.5 = 18 */
        }

        div {
            /* The child element inherits the row height of the parent element body of 1.5 */
            /* This 1.5 is 1.5 times the font size of the current element, so the row height of the current div is 21px */
            font-size: 14px;
        }

        p {
            /* 1.5 * 16 = 24 Current row height */
            font-size: 16px;
        }

        /* li If the text size is not specified manually, the text size of the father (the father here can push up layer by layer) will be inherited  */
        /* That is, the text size of body 12px and all li is 12px */
        /* The row height of the current li is 12 * 1.5 = 18  */
    </style>
</head>

<body>
    <div>Farmer's three fists</div>
    <p>asdf</p>
    <ul>
        <li>No text size specified</li>
    </ul>
</body>

</html>

priority

  • If the selectors are the same, cascading is performed
  • If the selector is different, it is executed according to the selector weight

The selector weights are shown in the following table:

selectorSelector weight
Inheritance or*0,0,0,0
element selector 0,0,0,1
Class selector, pseudo class selector0,0,1,0
ID selector0,1,0,0
Inline style = ""1,0,0,0
! Important importantInfinity

**Rule: * * compare bit order. Compare bit size when bit order is the same.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Priority of three features</title>
    <style>
        div {
            color: pink;
        }

        .test {
            color: red;
        }

        #demo {
            color: green;
        }
    </style>
</head>

<body>
    <div class="test">You look good with a smile</div> <!-- red -->
    <div class="test" id="demo">You look good with a smile</div> <!-- green -->
    <div class="test" id="demo" style="color: blue;">You look good with a smile</div> <!-- blue -->
<!-- 
    If in css The selector follows a property value !important´╝îThen this attribute will be executed!
    For example: div {
             color: pink !important;  
          }
          ...
    <div class="test" id="demo" style="color: blue;">You look good with a smile</div> -- pink --
-->

</body>

</html>

Priority considerations:

  • The weight is composed of 4 groups of numbers, but there will be no carry!
  • It can be understood that the class selector is always greater than the element selector, the ID selector is always greater than the class selector, and so on!
  • The grade judgment is from left to right. If a certain value is the same, the next value will be judged
  • You can simply remember: the wildcard and inheritance weight is 0, the label selector is 1, the class (pseudo class) selector is 10, the ID selector is 100, and the inline style sheet is 1000,! important infinity
  • The inherited weight is 0. If the element is directly selected, no matter how high the weight of the parent element is, the weight of the child element is 0!
  • A link browser specifies a style by default, so it does not participate in inheritance
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Priority of three features - attention issues</title>
    <style>
        /* The father's weight is 100 */
        #father {
            color: red !important;
        }

        /* p The inherited weight is 0 */
        /* So in the future, when we see which style the label implements, we first see whether the label is directly selected
           If you are directly selected, it has nothing to do with your father!*/
        p {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- The inherited weight is 0. If the element is not directly selected, no matter how high the weight of the parent element is, the weight of the child element is 0 -->
    <div id="father">
        <p>You still look good</p> <!-- pink -->
    </div>
    
    <!-- a The link browser specifies a style by default, so it does not participate in inheritance a You must change the style directly a Pick out -->
    <a href="#"> I'm a separate style</a>
</body>

</html>

Superposition of weights:

If it is a composite selector, there will be weight superposition, and the weight needs to be calculated.

Note: emphasize again! Although the weight will be superimposed, it will not carry( 10000 element selectors are no better than a class selector).

Compare bit by bit from left to right. Only the left one is the same size, can you compare the right one!

For example:

  • div ul li -> 0,0,0,3
  • .nav ul li -> 0,0,1,2
  • a:hover -> 0,0,1,1
  • .nav a -> 0,0,1,1

If you want to style an element, you must give it a high enough weight (Note: it's for him, not his father!).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Priority of three characteristics -- weight superposition</title>
    <style>
        /* Composite selectors have the problem of weight superposition */
        /* Although the weights will be superimposed, there will never be carry. For example, ten 0,0,0,1 add up to 0,0,0,10 instead of 0,0,1,0 */
        /* ul li Weight 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: green;
        }

        /* li The weight of is 0,0,0,1 */
        li {
            color: red;
        }

        /* .nav li Weight 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>unfaithful man</li>	<!-- pink -->
        <li>Big elbow</li>	<!-- pink -->
        <li>Pig tail</li>	<!-- pink -->
    </ul>
</body>

</html>

Tags: html5 html css

Posted on Thu, 02 Sep 2021 18:27:02 -0400 by Jakehh