技術標籤：CSScss

前言：本人是初學小白，很多地方見解有誤的，還請大佬們指正。
首先來明確一下概念：
什麼是後代選擇器？

• 語法：選擇器1 選擇器2{}
• 例子：#haha b{ color: red; }
• 解釋：簡單的來說呢，就是選擇id為haha的元素的後代中的b標籤，注意這裡說的後代，後代不止有兒子，可能有孫子，孫子的兒子，孫子的孫子…只要是他的後代，而且是個b標籤，顏色就會變成紅色。

什麼是子選擇器？

• 語法：選擇器1>選擇器2{}
• 例子：.xixi > i{ color: red; }
• 解釋：簡單來說呢，就是選擇類xixi的元素的兒子中的i標籤，注意這裡說的兒子，是兒子，沒叫上孫子、孫子的兒子、孫子的孫子…只能是兒子，並且是i標籤，顏色就會變紅。

二者的區別？

1. 首先最大的區別就是寫法不一樣啦(狗頭)。
2. 咳咳，最大的區別是選擇的後代不一樣，後代選擇器選擇的父元素下的所有後代，包括孫子、孫子的兒子、孫子的孫子…而子選擇器值包含兒子。

舉個栗子：
現在有一個div裡面包含了i標籤，i標籤裡面包含了b標籤

<div class="ohh">ohh<i>斜斜<b>123</b>斜2</i></div>

我們用後代選擇器給標籤b加上css：

.ohh b{
            color: red;
        }

結果是這樣的：

如果用子選擇器這樣寫是沒有效果的

.ohh>b{
            color: red;
        }

結果如下：

如果想使用子選擇器就只能這樣寫：

.ohh>i>b{
            color: red;
        }

結果如下：