常用選擇器(二）
- 元素之間關(guān)系概述：
1.父元素：直接包含子元素的元素
2.子元素：直接被父元素包含的元素
3.祖父元素：直接或間接包含后代元素的元素，子元素也是后代元素
4.后代元素：直接或間接被祖父元素包含是元素，父元素也是祖父元素
-
兩個選擇器
圖片發(fā)自簡書App
<div>
<p>我的小小<span>豬豬</span>在哪里?</p>
<p>豬八戒愛媳婦</p>
<span>孫悟空七十二變</span>
</div>
<p>沙悟凈霸占流沙河</p>
-
幾個要求：
1.div里面的p設置字體顏色為紅色
div里面有兩個p，因此這兩個p均是div的后代元素，更是div的子元素
根據(jù)后代元素選擇器語法：祖父元素 后代元素{}可知代碼如下：
div p{
color: red;
}
效果：
圖片發(fā)自簡書App
2.將第一個p內(nèi)的span設置字體大小為20px
第一個p內(nèi)的span是div的后代元素，而div內(nèi)還有一個子元素span，因此，第一個p內(nèi)的span為div的后代的后代即
div p span {
font-size:20px;
}
效果如下：
圖片發(fā)自簡書App
3.將div下面的子元素span設置背景顏色為黃色
span為div的子元素，根據(jù)子元素選擇器的語法：父元素 > 子元素{}即
div > span{
background-color:yellow;
}
圖片發(fā)自簡書App
- 兩個學習網(wǎng)站：
