常用选择器(二）

• 元素之间关系概述：

1.父元素：直接包含子元素的元素
2.子元素：直接被父元素包含的元素
3.祖父元素：直接或间接包含后代元素的元素，子元素也是后代元素
4.后代元素：直接或间接被祖父元素包含是元素，父元素也是祖父元素

• 两个选择器
  前端学习Day9

<div>
<p>我的小小<span>猪猪</span>在哪里?</p>
<p>猪八戒爱媳妇</p>
<span>孙悟空七十二变</span>
</div>
<p>沙悟净霸占流沙河</p>

• 几个要求：
  1.div里面的p设置字体颜色为红色

div里面有两个p，因此这两个p均是div的后代元素，更是div的子元素

根据后代元素选择器语法：祖父元素 后代元素{}可知代码如下：

div p{
color: red;
}

效果：

前端学习Day9

2.将第一个p内的span设置字体大小为20px

第一个p内的span是div的后代元素，而div内还有一个子元素span，因此，第一个p内的span为div的后代的后代即

div p span {
font-size:20px;
}

效果如下：

前端学习Day9

3.将div下面的子元素span设置背景颜色为黄色

span为div的子元素，根据子元素选择器的语法：父元素 > 子元素{}即

div > span{
background-color:yellow;

}

效果如下： 前端学习Day9

• 两个学习网站：

css diner
freecodecamp6