前言:本人是初学小白,很多地方见解有误的,还请大佬们指正。
首先来明确一下概念:
什么是后代选择器?
语法:选择器1 选择器2{}例子:#haha b{ color: red; }
解释:简单的来说呢,就是选择id为haha的元素的后代中的b标签,注意这里说的后代,后代不止有儿子,可能有孙子,孙子的儿子,孙子的孙子…只要是他的后代,而且是个b标签,颜色就会变成红色。
什么是子选择器?
语法:选择器1>选择器2{}例子:.xixi > i{ color: red; }
解释:简单来说呢,就是选择类xixi的元素的儿子中的i标签,注意这里说的儿子,是儿子,没叫上孙子、孙子的儿子、孙子的孙子…只能是儿子,并且是i标签,颜色就会变红。
二者的区别?
首先最大的区别就是写法不一样啦(狗头)。咳咳,最大的区别是选择的后代不一样,后代选择器选择的父元素下的所有后代,包括孙子、孙子的儿子、孙子的孙子…而子选择器值包含儿子。
举个栗子:
现在有一个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;}
结果如下: