1.什么是后代選擇器？

作用：找到指定標簽的所有后代標簽，設置屬性。

首先你要明確什么是后代？

你的兒子，孫子，重孫子等，只要有你的血脈的，都是你的后代。

我們先來舉個例子

我們想讓div中的標簽變紅

1.用標簽選擇器可以做嗎？

不可以，它會選中頁面上的所有p，包括div以外的

2.用id選擇器可以做嗎？

可以，可以給div中的兩個p設置id，然后通過id選擇器給這兩個p設置顏色

3.用class選擇器可以做嗎？

可以，分別給它們設置class，然后設置顏色

但是無論是用id，class選擇器都有一個弊端，就是如果一個界面，div中有成千上萬個p怎么辦？難道你要一個個的去設置？這樣工作量就比較大了，所以要用到一個后代選擇器。

格式：

標簽名稱1 標簽名稱2{
? ?　　　　　　屬性:值;

}

先找到標簽名稱叫做標簽名稱1的標簽，然后再在這個標簽下面去查找所有名稱叫做標簽名稱2的標簽，然后再設置屬性

div p{}

注意點：

1.后代選擇器必須用空格隔開

2.后代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標簽中的都是后代

3.后代選擇器不僅僅可以使用標簽名稱，還可以使用其它選擇器

1.將id名稱與標簽名稱結合使用

? ??

2.將類名稱與標簽名稱結合使用

? ?

3.將id名稱與id名稱結合使用

? ??

4.將id名稱與類名稱結合使用

??

我們在這里需要補充一點：后代選擇器可以無限的往下延伸

??

有一個空格代表是一個后代

div? ul代表先找到div，從div中找到所有名字叫做ul的后代，只有一個名字叫做ul的，然后再來個空格，代表著從ul中去找到名稱叫做li的后代，那我們這里有幾個li的后代呢？我們可以找到兩個，后面又有了空格，代表著從li里面去找p的后代，先找到li里面叫做p的后代，找到了，就設置顏色，而第二個里面沒有名字叫做p的后代，就沒有找到，沒有找到就什么都不做，而如果第二段li中也有p，那么就會有兩個p變顏色。

?

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=chjchjb&title=課時71.后代選擇器（掌握）