在第八行加入了.first,#second>span{color;green}
和选择器的优先级有关。分组选择器 优先于标签选择器 。
因为#second>span{color;green}是一个id选择器,只作用于id等于second的标签里的span标签
我开始也在想这个问题,想通了.
就近原则,胆小如鼠靠近的是span,遵循h1,span{color:red;}
因为,如果通用选择器和标签选择器、子一代选择器等共存的话,浏览器会优先处理变迁选择器。所以胆小如鼠那几个字是红色。
应该是.first>span,#second>span{};
将第7行的h1,span{color:red;}删除试试
.first,#second>span{color:green;}
这条代码相当于:
.first{color:green;};
#second>span{color:green;};
.first后面也要加>span