CSS后代选择器和子选择器的区别

前言：本人是初学小白，很多地方见解有误的，还请大佬们指正。
首先来明确一下概念：
什么是后代选择器？

• 语法：选择器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;
        }

结果如下：