收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3519|回复: 17

[其他] 猜CSS定义后的文字颜色样式

  [复制链接]
发表于 2012-5-16 22:32:09 | 显示全部楼层 |阅读模式
本帖最后由 phantom 于 2012-5-18 11:01 编辑

好吧,我测试一下,看看这样的效果行不行,回帖只有管理员、版主、还有我自己能看到的好像。

然后这个题目呢是猜一下颜色,并且说出得到结果的原理是什么

为了版主大人的伟大计划和事业,我这个有点积分存在的路人奉献一下,不知道回帖能不能送积分,就算没有,我也会想办法送上。

奖励:
第一个答对的:30积分   lijia2202 (回答简洁明了)
第二个答对的:20积分
第三个答对的:10积分

HTML的结构是这样的:
  1. <div class="a1" id="a1">
  2.         <div class="a2">
  3.                 <div class="a3">
  4.                         <div class="a4">
  5.                                 <div class="a5">
  6.                                         <div class="a6">
  7.                                                 <div class="a7">
  8.                                                         <div class="a8">
  9.                                                                 <div class="a9">
  10.                                                                         <div class="a10">
  11.                                                                                 <div class="a11" id="a11">文字颜色</div>
  12.                                                                         </div>
  13.                                                                 </div>
  14.                                                         </div>
  15.                                                 </div>
  16.                                         </div>
  17.                                 </div>
  18.                         </div>
  19.                 </div>
  20.         </div>
  21. </div>
复制代码
第一个问题:
如果用了这个样式之后,文字会是什么颜色,为什么?
  1. <style type="text/css">
  2. #a1 {color:#FF0000;}
  3. .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 {color:#0000FF;}
  4. </style>
复制代码
第二个问题:
如果用了这个样式之后呢,文字会不会变色,又是为神马呢?
  1. <style type="text/css">
  2. #a11 {color:#99CC29;}
  3. .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 {color:#0000FF;}
  4. </style>
复制代码
先到先得,开始!

补充:千万不要只给颜色的答案哈,这个代码测试一下就知道了……所以请说一下是为什么会是你得到的结果。

---------------------------------------------- 这是神奇的分割线 ----------------------------------------------------

结果公布:
这帖子原本是测试的效果的,后期应该会有更多类似这样的帖子出现,应该也会根据题目的难度值送上积分之类的奖励。更多的是希望大家通过这样的帖子内容能学到点什么东西。现在这个帖子发出来也有几天时间了,目前截至到10#的回答就算结束吧,后面大家可以针对这个题目做一些讨论。

获奖的名单在上面已经公布了,如有争议就直接回帖吧。

答案:
第一个问题答案是:
  1. .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 {color:#0000FF;}
复制代码
未标题-1.png
说明:因为#a1是最外层的元素,而文字最近的元素是.a11,最终文字颜色会受到.a11的直接影响而覆盖了原本应该要继承#a1的颜色。我们可以简单做个实验,把原来的样式调整成下面这样的,会发现最终的颜色是.a11 {color:#0000FF;}
  1. <style type="text/css">
  2. #a1 {color:#FF0000;}
  3. .a11 {color:#0000FF;}
  4. </style>
复制代码
第二个问题的答案是:
  1. #a11 {color:#99CC29;}
复制代码
说明:#a11和.a11都是直接作用于文字的最近元素,那么这个时候要比较的是选择符的优先级问题,很多书籍或者教程都说过选择符的大小比较可以用四个计数器的方式来统计,下面的回帖中也有朋友提到了,不过这几个数字是计数器而已,简单理解是,统计有几个选择符。
#a11       0,1,0,0
.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11     0,0,11,0
ID永远比CLASS要高,所以同样直接作用于文字的div标签中出现了class和id,最终会被id的样式覆盖,在firebug中我们也可以看到效果
2012_5_18_1.png

小结一下,需要注意的问题是覆盖、继承、选择符的优先级

评分

参与人数 1威望 +2 收起 理由
4321285 + 2 好点子

查看全部评分

发表于 2012-5-16 23:03:56 | 显示全部楼层
本帖最后由 thecorsair 于 2012-5-16 23:08 编辑

第一个问题 之所以是蓝色
A1的优先值是0.1.1.0
A11的优先值就是 0.1.11.0 因为有11个class选择符相加
第二个问题  绿色
a11的优先值0.1.11.0

不求积分
只是看看自己的理论对不对~


补充内容 (2012-5-16 23:12):
ID的优先权比class高

补充内容 (2012-5-17 15:24):
求指导~
回复 支持 反对

使用道具 举报

发表于 2012-5-16 23:20:32 | 显示全部楼层
都是蓝色啊 火狐测试得、、、
回复 支持 反对

使用道具 举报

发表于 2012-5-17 00:36:05 | 显示全部楼层
本帖最后由 juller 于 2012-5-17 00:37 编辑

始终是color:#0000FF;
这题目看起来像是在靠css权重优先级。
一部分在考color属性的继承(inherit)
先说id>class 肯定是大于class,但是id规定的权重范围只在子文本元素,虽然后代元素会继承其属性,但是很容易在后代元素上使用元素选择器/class选择器等((其他选择器))定义样式 直接就会覆盖掉父元素的color属性
但如果是只针对子文本元素,那肯定是以id定义的color属性值被设置了。毕竟这里才考到了权重。
回答完毕,希望小志 纠正。
回复 支持 反对

使用道具 举报

发表于 2012-5-17 09:19:45 | 显示全部楼层
第一个问题,显示颜色为:color:#0000FF;
第二个问题,显示颜色为:color:#99CC29;
你是不是从鬼哥css模块化文章中得来的?
回复 支持 反对

使用道具 举报

发表于 2012-5-17 10:33:16 | 显示全部楼层
第一个问题,应该都答对,

第二个问题,难道是class优先,最后读取的是id吗
回复 支持 反对

使用道具 举报

发表于 2012-5-17 11:09:36 | 显示全部楼层
一:第一种 取  .a11 的颜色,因为直接的父级id 没有从父级定义到当前样式的级别高。

二:第二种 取 #a11的颜色,因为当前ID标签的极别最高。
回复 支持 反对

使用道具 举报

发表于 2012-5-17 11:25:33 | 显示全部楼层
先取定义最近的,然后按照优先级来取。。。
回复 支持 反对

使用道具 举报

发表于 2012-5-17 14:17:07 | 显示全部楼层
第一个是黄色;第二个是#99CC29(不知道这是啥颜色),它的特殊性最高。算了,给个答案吧,不知道怎么解释,看来还是不够了解。
回复 支持 反对

使用道具 举报

发表于 2012-5-17 20:45:20 | 显示全部楼层
这两个问题都是在考查 CSS选择器 权重问题。
第一个#a1的权重是 0,1,0,0;
虽然组合了多个类,但还是比ID选择器少, 为 0,0,11,0;
所以颜色是 color:#FF0000;

第二题就不一样了,#a11的权重最高,所以会变为 0,1,0,0;
所以颜色是 color:#99CC29;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-18 11:08:35 | 显示全部楼层
thecorsair 发表于 2012-5-16 23:03
第一个问题 之所以是蓝色
A1的优先值是0.1.1.0
A11的优先值就是 0.1.11.0 因为有11个class选择符相加

颜色是正确了,不过第一个问题的描述存在一些不同的意见。
这个时候应该要考虑的是继承的问题吧。

A1这个div中虽然存在着#a1和.a1,但是.a1这个类名并没有写出来,最终应该是0,1,0,0
A11这个div中虽然存在这#a11和.a11,但是#a11这个ID名并没有写出来,最终应该是0,0,11,0

这样的话,你这个理论似乎就不通了。
不知道我这样的理解是否正确呢?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-18 11:10:01 | 显示全部楼层
juller 发表于 2012-5-17 00:36
始终是color:#0000FF;
这题目看起来像是在靠css权重优先级。
一部分在考color属性的继承(inherit)

第二个颜色是不对的,ID始终比class要高,无论有多少个class组合而成的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-18 11:11:19 | 显示全部楼层
xmlovedoudou 发表于 2012-5-17 09:19
第一个问题,显示颜色为:color:#0000FF;
第二个问题,显示颜色为:color:#99CC29;
你是不是从鬼哥css模块 ...

嗯。颜色是对了,不过为什么没有这个结果的原因分析呢?

然后对于这个东西,并不是根据鬼哥的模块化文章中得出的,而是我临时想的一个东西。当然不可否认的一点就是鬼哥的模块化文章很赞。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-18 11:12:12 | 显示全部楼层
bluegirlss 发表于 2012-5-17 10:33
第一个问题,应该都答对,

第二个问题,难道是class优先,最后读取的是id吗

第一个问题,应该都答对?额……答案是?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-18 11:13:54 | 显示全部楼层
wheato 发表于 2012-5-17 20:45
这两个问题都是在考查 CSS选择器 权重问题。
第一个#a1的权重是 0,1,0,0;
虽然组合了多个类,但还是比 ...

第一个问题好像没答对哦。不是红色,而是蓝色哦。
回复 支持 反对

使用道具 举报

发表于 2012-5-23 13:23:06 | 显示全部楼层
本帖最后由 xmlovedoudou 于 2012-5-23 13:25 编辑

这个确实是按照“就近”原则来进行渲染的,而不是“权重叠加”原则,这是个假象。

小志的例子其实可以这么给:

1.都是直接作用在同一标签上时,样式最终显示还需要依靠权重(事实上,此时依然依赖“就近”原则,只是此时,大家“平级”啊!)。如下,显示结果为orange:

  1. div { color:blue; }
  2. .a11 { color:red; }
  3. #a11 { color:orange; }
复制代码
2.继承情形下(非直接作用在标签上),依赖“就近”原则,如下,显示结果为orange

  1. .a3 { color:orange; }
  2. .a2 { color:red; }
  3. .a1 { color:blue; }
复制代码
3.混合情况下(继承和直接作用情况),依赖“就近”原则,如下,显示结果为red。

  1. #a1 .a10 { color:blue; }
  2. .a11 { color:red; }
复制代码

评分

参与人数 1威望 +1 收起 理由
4321285 + 1 解释得很详细,很清晰

查看全部评分

回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-23 15:11:59 | 显示全部楼层
xmlovedoudou 发表于 2012-5-23 13:23
这个确实是按照“就近”原则来进行渲染的,而不是“权重叠加”原则,这是个假象。

小志的例子其实可以这 ...

嗯,化简之后是这样理解。

只是很多时候我们很容易会被一些假象给欺骗了。
回复 支持 反对

使用道具 举报

发表于 2012-5-24 15:22:12 | 显示全部楼层
太犀利了~~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-7-24 13:03 , Processed in 0.109099 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表