css中后代选择器与子选择器与相邻兄弟选择器的区别

css中后代选择器与子选择器与相邻兄弟选择器的区别

<style>
*{
    font-size:20px;
}
<style>
<div>
    <p>第一层<p>第二层</p></p>
    <span>相邻</span>
</div>

后代选择器：就是对象当中所有的子元素，孙子元素以及最底层的元素

div p{
    font-size:26px;
}//后代选择器第一层，第二层都会变成26px的字体大小

子选择器：就单单是子元素，子元素的子元素就不算了

div > p{
    font-size:26px;
}//后代选择器第一层会变成26px的字体大小，但第二层不会改变大小

相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素

p + span{
    font-size:26px;
}//第一层的p后面的span会变换字体大小