- El peso de las tres características principales de CSS.

1. Herencia

Las etiquetas secundarias heredarán ciertos estilos de la etiqueta principal, como el color, el comienzo de la fuente, el texto del comienzo de la línea y el comienzo de la lista.

 /* 继承性：子标签继承父标签的某些样式 优点可以简化css代码 */
        /* div {
            color: red;
            font-size: 20px;
        } */
        
        body {
            color: red;
            font: 12px/1.5 '宋体'
        }
        /* div的文字大小为14*1.5=21px */
        
        div {
            font-size: 14px;
        }
        /* p的文字大小为16*1.5=24px */
        
        p {
            font-size: 16px;
        }
        /* li没有指定文字大小，则会继承父亲body的文字大小12*1.5=18px */

2. Capas

El mismo estilo entra en conflicto con el principio más cercano, y los introducidos posteriormente entran en vigor. Si el estilo no entra en conflicto, no se verá afectado.

        /* 层叠性：有相同的标签就近原则，谁离div标签近谁就被执行 */
        /* div {
            color: red;
            font-size: 50px;
        }
        
        div {
            color: pink;  div颜色为pink色
        }
        
    

 <body>

    <div>你好我是程序员</div>
    <p>你好我是程序员</p>
    <ul>
        <li>333</li>
    </ul>
</body>

Tres, prioridad

! importante> estilo estilo en línea> selector de id> selector de clase, selector de pseudo-clase> selector de elementos> herencia o *

Cuarto, peso

El peso heredado es (0,0,0,0)
El peso del selector de etiquetas es (0,0,0,1)
El peso del selector de clase y pseudoclase es (0,0,1,0)
El peso del selector de id selector es (0,1,0,0)
El peso del estilo en línea es (1,0,0,0)
! important tiene peso ilimitado

Nota: El peso heredado es 0 y el peso del estilo heredado es el más pequeño y más pequeño que el peso del selector de comodines.

Ejercicio de peso:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 优先级：!important>style行内样式>id选择器>类选择器,伪类选择器>元素选择器>继承或者* -->
    <style>
        /* div {
            color: red!important;
        }
        
        .pig {
            color: sandybrown;
        }
        
        #demo {
            color: springgreen;
        } */
        /* 注意：继承的权重是0 不管父元素权重多高，子元素的权重都是0，p的父亲father权重是100 ,p本身权重是1 */
        
        #father {
            color: red!important;
        }
        
        p {
            color: royalblue;：继承的权重是0 父亲权重在大，孩子继承过来权重也是0，所以颜色为 royalblue色
        }
    </style>
</head>

<body>

    <div id="father">
        <p>你好</p>
    </div>

</body>

</html>

Malentendidos sobre el peso:

El selector de clases y el selector de ID no están al mismo nivel, y los pesos de innumerables clases no excederán el peso del selector de ID. Del mismo modo, el selector de etiquetas no excederá el peso del selector de clases.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 .box2 .box3 .box4 .box5 .box6 .box7 .box8 .box9 .box10 .box11 {
            color: red;
        }
        
        #box11 {
            color: pink;最终颜色为pink色
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6">
                            <div class="box7">
                                <div class="box8">
                                    <div class="box9">
                                        <div class="box10">
                                            <div class="box11" id="box11">我喜欢吃大肘子</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




    </div>
</body>

</html>

Las tres características de css y la cuestión del peso

- El peso de las tres características principales de CSS.

Supongo que te gusta