&nbs p;
一、关于类选择器的一个问题
假设有下面一个面试题， CSS 代码如下：
. red { color: red; } .green { color: green; } HTML 如下：
<div class=" red "><div class=" green "><p>1. 颜色是？</p></div></div> <div class=" green "><div class=" red "><p>2. 颜色是？</p></div></div>
问：第一行和第二行 文字颜色 分别是？
A. 绿 绿
B. 红 红
C. 绿 红
D. 红 绿
VAR radio Class Selector = document.getElementById("classSelector"). getelementsbytagname ("input");for(var index=0; index this .value === "0"){alert("哥，不会吧，你居然选错了！");}else{alert("没错，就是绿色和 红色 颜色！");}}}
这个例子很 简单 ，我估计基本上都能回答正确： DOM 越深的类名权重越高，因此， 第一行文字红色，第二行文字绿色 第一行文字绿色，第二行文字红色！因此，上一题答案为C.
您可以狠狠地点击这里：CSS类名选择器顺序和层级的权重
二、稍作修改： 类选择器 →后代选择器
再来一个题目，如果我们把上例的类选择器改成后代选择器会如何呢？
.red p { color: red; } .green p { color: green; } HT ML 维持不变：
<div class=" red "><div class=" green "><p>1. 颜色是？</p></div></div> <div class=" green "><div class=" red "><p>2. 颜色是？</p></div></div>
问：第一行和第二行文字颜色分别是？
A. 绿 绿
B. 红 红
C. 绿 红
D. 红 绿
var radioDescSelector = document.getElementById("descSelector").getElementsByTagN am e("input");for(var descIndex=0; descIndex == ="0"){alert("哦呵呵，没想到自己会选错吧！");}else{alert("恩，不错，您选择了正确的答案！");}}}
经验会转化为具象化的认识以帮助我们记忆，然而，这又容易形成固定 思维 ，对一些类似情形造成错误认识。
如果我们按照一 开始 类选择器的例子来隐射这个类似的例子，您可能就会得到错误的答案——这个例子正确选项 不是C .
那正确的选项 应该 是？
您可以狠狠地点击这里：CSS后代选择器顺序和层级的权重demo
您可以在各个浏览器下看到，第一行和第二行的文字都是绿色的，如下截图所示：
也就是说正确选项应该 是A .
为何？
貌似这种后代选择器情形，祖先选择器对应DOM无论多深多浅都是同一级别的，而最终起作用的是选择器声明在CSS样式中的顺序，即优先显示后面的CSS声明。
本例中， .green p { color: green; } 在 .red p { color: red; } 的后面显示，因此，两行文字都是绿色的。要是我们改成下面：
.green p { color: green; } /* 我在上，酱油命 */ .red p { color: red; } /* 我在下，显示我 */ 那么，两行文字就变身为红色了。
如果您目前手头上的是现代浏览器，可以点击这里，编辑下CSS代码顺序（FireFox下剪切粘贴有些问题，手动输入），会看到右侧文字果不其然红色了~~
三、再留个问题
改下CSS代码：
:not(.green) p { color: red; } .green p { color: green; } HTML代码维持不变：
<div class=" red "><div class=" green "><p>1. 颜色是？</p></div></div> <div class=" green "><div class=" red "><p>2. 颜色是？</p></div></div>
问：第一行和第二行文字颜色分别是？
您可以通过评论的形式写下您认为的答案~~
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: CSS后代选择器可能的错误认识 全部内容，希望文章能够帮你解决 html5教程-小tip: CSS后代选择器可能的错误认识 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: CSS后代选择器可能的错误认识的详细内容...