常用选择器(二）
- 元素之间关系概述：
1.父元素：直接包含子元素的元素
2.子元素：直接被父元素包含的元素
3.祖父元素：直接或间接包含后代元素的元素，子元素也是后代元素
4.后代元素：直接或间接被祖父元素包含是元素，父元素也是祖父元素
-
两个选择器
图片发自简书App
<div>
<p>我的小小<span>猪猪</span>在哪里?</p>
<p>猪八戒爱媳妇</p>
<span>孙悟空七十二变</span>
</div>
<p>沙悟净霸占流沙河</p>
-
几个要求：
1.div里面的p设置字体颜色为红色
div里面有两个p，因此这两个p均是div的后代元素，更是div的子元素
根据后代元素选择器语法：祖父元素 后代元素{}可知代码如下：
div p{
color: red;
}
效果：
图片发自简书App
2.将第一个p内的span设置字体大小为20px
第一个p内的span是div的后代元素，而div内还有一个子元素span，因此，第一个p内的span为div的后代的后代即
div p span {
font-size:20px;
}
效果如下：
图片发自简书App
3.将div下面的子元素span设置背景颜色为黄色
span为div的子元素，根据子元素选择器的语法：父元素 > 子元素{}即
div > span{
background-color:yellow;
}
图片发自简书App
- 两个学习网站：
