Cascading sex

If the same selector sets the same style, one style will overwrite (overlay) another style that conflicts. Principle of cascade:

  • The principle of style collision is the proximity principle, where whichever style is closest to the structure is executed
  • Styles do not clash and do not cascade
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            color: red;
        }

        div {
            color: green;
        }
    </style>
</head>
<body>
   <div>
       324
   </div>
</body>
</html>
Copy the code

inheritance

Inheritance in CSS: Word tags inherit certain styles of their parent tags, such as text color and font size.

  • Inheritance, when used properly, can simplify code and reduce the complexity of CSS styling
  • Child elements can inherit the style of the parent element (text-,font-,line- at the beginning of these elements can inherit, as well as the color attribute)
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            color: green;
        }
    </style>
</head>
<body>
   <div>
       <p>324</p>
   </div>
</body>
</html>
Copy the code

Row height inheritance

body {
            font:12px/1.5 Microsoft Yahei;
}
Copy the code
  • Row height can follow units or not follow units
  • If the child element has no row height set, the parent element inherits a row height of 1.5
  • The line height of the child element is: the text size of the current child element *1.5
  • The biggest advantage of this method is that the inside elements can automatically adjust the line height to match their text size
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font:12px/1.5 Microsoft Yahei;
        }
        div {
            /*div line height :14 * 1.5 = 21px; * /
            font-size: 14px;
        }

        p {
            /*p row height: 20px * 1.5 = 30px; * /
            font-size: 20px;
        }
    </style>
</head>
<body>
   <div>Brian Brian</div>
   <p>Make more money at the pump</p>
   <ul>
       <li>Ul does not have the text size of the parent element. Ul does not have the text size of the parent element</li>
   </ul>
</body>
</html>
Copy the code

priority

When multiple selectors are specified for the same element, precedence is generated

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

The selector weights are shown in the following table.

The selector Selector weight
Inheritance or * 0,0,0,0
Element selector 0,0,0,1
Class selector, pseudo class selector 0,0,1,0
The ID selector 0,1,0,0
Inline style=”” 1,0,0,0
! important Up infinity

Priorities:

  • 1. The weight consists of four groups of numbers, but there is no carry
  • 2. The class selector is always greater than the element selector, the ID selector is always greater than the class selector, and so on
  • 3. Judge the rank from left to right. If the value of one digit is the same, judge the value of the next digit.
  • 4. Can simply remember: wildcard and inheritance weight is 0, label selector is 1, class (pseudo-class) selector is 10, ID selector is 100, inline style sheet is 100,! Important infinity
  • 5. The inherited weight is 0. If the element is not directly selected, no matter how high the parent weight is, the child weight is 0

Superposition of weights

Weight overlay: If it is a compound selector, there will be weight overlay, need to calculate the weight, directly add to calculate the comparison

  • Div ul li —–> 0,0,0,3
  • Nav ul li —–> 0,0,1,2
  • A: hover — — — — — > 0,0,1,1
  • . The nav a — — — — – > 0,0,1,1
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        li {
            color:red;
        }

        .pig {
            color: green;
        }

    </style>
</head>
<body>
    <ul>
        <li class="pig">Big pig hoof</li>
        <li>Big elbow</li>
        <li>The pig tail</li>
    </ul>
</body>
</html>
Copy the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .nav li {
            color:red;
        }

        /* Pig will not turn green if it is just a pig, because the weight of the pig is not as heavy as the weight of the. Nav li
        .nav .pig {
            color:green;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="pig">Big pig hoof</li>
        <li>Big elbow</li>
        <li>The pig tail</li>
    </ul>
</body>
</html>
Copy the code