注:之前没有混淆子选择器和后代选择器的关系,今天看到一篇好文章,马上就明白了,转载。
通俗地说,儿子一定是子孙,但子孙不一定是儿子。
css子元素选择器和后代选择器在功能说明中非常相同,但实际上存在差异。
本文通过两个简单的示例介绍子元素选择器和后代选择器的区别。 需要的朋友请参考。
首先,我们来看一下“子元素选择器”和“后代选择器”的基本语法。
语法
子元素选择器的语法如下:
divul{color:red; () ) ) ) )。
子元素选择器使用大于符号“”的元素作为连接器,而子元素选择器只能选择作为元素子元素的元素
后代选择器的语法如下:
h1 em{color:red; () ) ) ) )。
后代选择器可以选择作为元素后代的元素。 父元素和子元素必须用空格分隔。 这表示选择了元素下的子元素。
两者的区别:
通过一个例子说明子选择器和后代选择器的区别。
让我们来看看后代选择器div p的效果
divp { background-color : yellow; () ) ) ) )。
子元素选择器
后代选择器
执行结果如下。
让我们来看看选择器divp的效果
divp { background-color : yellow; () ) ) ) )。
子元素选择器
后代选择器
执行结果如下。
从上述例子可以看出,子选择器只对其第一代元素起作用,而后代选择器对n(n为自然数)代元素起作用。