当前位置：网站首页>Priority issues

Priority issues

2022-06-12 08:41:00 【Little boy who likes hot pot】

1. The weight is 4 Groups of numbers make up , But there will be no carry

2. Rank judgment from left to right , If the values of a certain class are the same , Then judge the next numerical value

3. A simple way to remember ： Wildcard and inheritance weights are 0, class （ pseudo-classes ） Selector for 10,id Selectors 100, The inline style sheet is 1000,！important infinity

*4. The inherited weight is 0, If the element is not directly selected , No matter how heavy the parent element is , The weight of the child element is 0

a key ： For example, the weight of a father is 100,p The inherited weight is 0, So the style is p Medium （ Inherit ） Color

Code ：

<!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 The weight </title>

     <style>
           /*  Father's weight is 100 */
           #father{
                    color:pink;
           }

           /* p The inherited weight is 0,*/
           p{
                    color: red  ;
           }
     </style>

</head>

<body>
        <div id="father">
              <p>CSS The weight </p>
        </div>   
</body>

</html>

Running effect ：

 

Even if the father style is followed by !important It doesn't work ,p The inherited weight is 0, When p When writing styles in , The weight of 1, So the style is p

Which style does the label execute , Let's see if this label is directly selected

5. Change label style 、

Code ：

<!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 The weight </title>

     <style>
           /*  Father's weight is 100 */
           #father{
                    color:pink;
           }

           /* p The inherited weight is 0,*/
           p{
                    color: red  ;
           }

           body{
                    color: red;
           }

           a{
                  color: green;
           }

     </style>

</head>

<body>
        <div id="father">
              <p>CSS The weight </p>
        </div>   

        <a href="#"> I'm a separate style </a>
</body>

</html>

Running effect ：

 

原网站

版权声明
本文为[Little boy who likes hot pot]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203010547378463.html

边栏推荐

猜你喜欢

随机推荐