层次选择器

层次选择器

1，后代选择器：

【注释】：在某个元素的后面。类似，祖爷爷 -> 爷爷 -> 爸爸 -> 你，祖爷爷后面的都是他的后代！

【代码】：

    <style>
        body p{
            background: darkviolet;
        }
    </style>

 

 

 

 

 

 

 

 

2，子选择器：

【注释】：只有一代人。类似，爷爷 -> 父亲，或者父亲 -> 你

【代码】：

    <style>
        body>p{
            background: coral;
        }
    </style>

 

 

 

 

 

 

3，相邻兄弟选择器：

【注释】：相邻的弟弟选择器，只有一个，相邻的，向下

【代码】：

    <style>
        .active+p{
            background: #7e6fff;
        }
    </style>

 

 

 

 

 

 

 

4，通用选择器：

【注释】：弟弟们选择器，同类型以下的所有的

 

【代码】：

    <style>
        .active~p{
            background: aqua;
        }
    </style>