html--基础知识层级选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--     后代  ul li{}    寻找父级元素下面的的元素（如：li，寻找父元素下面li标签）
        父子  ul > li{}  寻找父级元素（如：ul，寻找子元素上面的ul标签）
        兄弟  div ~ ul{} 向下寻找，不会向上寻找
        相邻  div + ul{}  紧挨着下一个的标签
        
-->
        <style>
        /* 后代 */
/*            ul li{
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                color: #0000FF;
            } */
            /* 父级 */
/*              ol >li{
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                color: #0000FF;
            } */
            /* 兄弟 */
/*             div ~ ul{
                color: #0000FF;
            } */
            /* 相邻 */
            div+ul{
                color: #0000FF;
            }
            div 
        </style>
    </head>
    <body>
        <div id="div1">1</div>
        <ul>
            <li>1</li>
        </ul>
        <ol>
            <li>2</li>
        </ol>
    </body>
</html>

 

posted on 2021-12-30 12:51  爱前端的小魏  阅读(170)  评论(0)    收藏  举报

导航