WEB前端基础 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        css的权重: id > 类 > 标签
        */
        #father.father #son.son{/* id:2 类:2 标签:0 */
            color: aqua;
        }
        #father #son{/* id:2 类:0 标签:0 */
            color: red; !important;
        }
        .father .son p{/* id:0 类:2 标签:1 */
            color: yellowgreen;
        }
        .father .son p.one{/* id:0 类:3 标签:1 */
            color: blue;
        }
        #one{/* id:1 类:0 标签:0 */
            color: hotpink;
        }
    </style>

</head>
<body>
<!--
    emmet语法
    ul>li{我是第&个li}*10
    div.father#father
    div.father#father>div.son#son>p.text#胡歌
-->
<div class="father" id="father">
    <div class="son" id="son">
        ddd
        <p class="one" id="one">我是一个p标签</p>
    </div>
</div>



</body>
</html>

 

posted @ 2020-04-07 23:00  -*-菜鸟程序-*-  阅读(153)  评论(0)    收藏  举报