小tip: CSS后代选择器可能的错误认识——张鑫旭

Posted 2020-08-07 Young

一、关于类选择器的一个问题

假设有下面一个面试题，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. 红 绿

 

这个例子很简单，我估计基本上都能回答正确：DOM越深的类名权重越高，因此，第一行文字红色，第二行文字绿色第一行文字绿色，第二行文字红色！因此，上一题答案为C.

您可以狠狠地点击这里：CSS类名选择器顺序和层级的权重

二、稍作修改：类选择器→后代选择器

再来一个题目，如果我们把上例的类选择器改成后代选择器会如何呢？

.red 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>

问：第一行和第二行文字颜色分别是？

A. 绿 绿

B. 红 红

C. 绿 红

D. 红 绿

 

经验会转化为具象化的认识以帮助我们记忆，然而，这又容易形成固定思维，对一些类似情形造成错误认识。

如果我们按照一开始类选择器的例子来隐射这个类似的例子，您可能就会得到错误的答案——这个例子正确选项不是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>

问：第一行和第二行文字颜色分别是？

您可以通过评论的形式写下您认为的答案~~

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2286

（本篇完）