Question

css 中后代选择器和子选择器的一点疑惑？

为什么第二个div我加了类，但是仍然把第二个div里面的第二个a给改了颜色呢？





Answer 1

CSS 后代选择器和CSS 子元素选择器都属于派生选择器的范畴，它们是通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

其中，CSS 后代选择器（descendant selector）又称为包含选择器，用于选择作为某元素后代的元素。代码中选择器"div a"指的是页面中<div>元素下的所有<a>元素，在没有给第二个<div>应用选择器"niubi"之前，页面上所有的<a>元素都应该显示棕色。如图：

没有给第二个div应用样式

CSS子元素选择器用于选择指定元素的第一代子元素。代码中".niubi>a"会选取设置了"class=niubi"样式的元素的直接子元素<a>，所以第一个<a>元素的颜色发生了变化。而<p>元素中包含的<a>并不是设置了"class=niubi"样式的<div>元素的直接子元素，所以颜色不会发生变化。如图：

第二个div应用样式niubi

---

后代选择器和子元素选择器的区别：

子元素选择器（child selector）通过“>”进行选择，仅是指它的直接后代（子元素的第一代后代），而后代选择器是通过空格来进行选择，作用于所有子后代元素。

Answer 2

原因就是被.niubi>a{color:chartreuse;}给重写（覆盖）了，css是从上到下编译的。下面的权重要高于上面的。

Answer 3

第二个div你虽然加了类，但它还是div，
所以你第一个样式“div a”对有类的div依然有作用的。

Answer 4

没毛病啊！
首先，所有div内的a（共4个）都设为红色（这个跟有没有加类是没关系的）；
然后，紧接着类niubi的a被设为绿色
结果没错啊？！