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

标签: css相关 继承 选择器 颜色 | 发表时间:2012-03-19 17:15 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286

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

假设有下面一个面试题,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

您可以在各个浏览器下看到,第一行和第二行的文字都是绿色的,如下截图所示:
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

(本篇完)

有话要说,点击 这里发表评论。

相关 [tip css 选择] 推荐:

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

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286. 一、关于类选择器的一个问题. 假设有下面一个面试题,CSS代码如下:. 问:第一行和第二行文字颜色分别是. 这个例子很简单,我估计基本上都能回答正确:DOM越深的类名权重越高,因此,第一行文字红色,第二行文字绿色第一行文字绿色,第二行文字红色.

小tip:巧用CSS3属性作为CSS hack

- 逸川 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867. 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

小tip: 使用CSS将图片转换成黑白的

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2547. //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的( filter: gray;),不过,当时,其他浏览器是无解的.

CSS,样式选择器

- - 博客园_首页
CSS(层叠样式表)使用来美化页面用的,CSS主要有元素内连,页面嵌入和外部引用三种使用方式;. 1.元素内联,直接将样式写入元素的style属性中,适用于样式没有可复用性的场合. 2.页面嵌入,在head头部进行嵌入. 结果:表示页面中所有的input都采用指定的样式. 适用于样式复用,减小页面的面积.

[译]XPath和CSS选择器

- - 博客园_首页
原文: http://ejohn.org/blog/xpath-css-selectors. 我认为将这两种选择器的写法做一个比较是很有价值的.. 所有P元素的第一个子元素. 从语法上看,我非常惊讶这两种选择器在某些情况下的相似性,尤其是'>'和'/'两者之间.虽然他们并不总是有着相同的功能(XPath中要取决于正在使用的轴),但通常情况下他们指的都是某个父元素的子元素.还有,空白符' '和'//'都意味着当前元素的所有后代元素.最后是星号'*',类似于通配符,表示所有元素,而不管是哪种标签名..

Css选择器命名规则

- ninickck - 前端观察
操作系统版本:Windows 7. 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev. 受影响的浏览器:所有浏览器.. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式...

编写高效的 CSS 选择器

- - 博客 - 伯乐在线
伯乐在线注:我们昨日在 @程 序员的那些事 微博上推荐了英文原文,感谢 @freestyle21 和 @沈涛-WEB工程师 的热情参与. 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.

网站CSS选择器性能讨论

- - 阿里巴巴(中国站)用户体验设计部博客
    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话:.

推荐三十款CSS样式选择器代码

- 小伟 - UED TEAM,用户体验设计,web前端开发
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

30个最常用css选择器解析

- We_Get - 博客园-首页原创精华区
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.