当前位置：首页 → 问答吧 → CSS 优先级　与　选择符

CSS 优先级　与　选择符

时间：2011-05-17

来源：互联网

现在有这样一个需求，有几千几万条数据，生成HTML，这些数据只是展示出来就要消耗很多CPU和内存，所以，为了快速反应，要以尽量少的 js 来处理，如果不用 js 来处理当然更好．所以，我想到了CSS．但是这些结构又不是一成不变的，可能会有多层嵌套，所以，我不能用CSS选择罗列出所有可能出现的情况．

为了说明问题，我举几个例子
最终要求这样： yellow 显示为黄色， red 显示为红色字体．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .b>.c{color:red;} .a>.c{color:yellow;} </style> </head> <body> <div class="a"> <div class="b"> <div class="c">red</div> </div> </div> <div class="b"> <div class="a"> <div class="c">yellow</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

但是 class="a" 或 b 与 c 之间还有另外的层（可能是多层），比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .b>.c{color:red;} .a>.c{color:yellow;} </style> </head> <body> <div class="a"> <div class="b"> <div> <div class="c">red</div> </div> </div> </div> <div class="b"> <div class="a"> <div> <div class="c">yellow</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这是因为 .b>.c 选择的 class b 下的直接下级 c ，而不包括孙子级 c

另外 .a .c 这种写法是谁声明在最下面，就套用谁．如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .b .c{color:red;} .a .c{color:yellow;} </style> </head> <body> <div class="a"> <div class="b"> <div> <div class="c">red</div> </div> </div> </div> <div class="b"> <div class="a"> <div> <div class="c">yellow</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

上面这个例子，我的本意是如果 class="c" 的最近上级是 a 的话，就套用 .a .c, 如果最近上级是 b 的话，就套用 .b .c
但是因为 .a .c 在 .b .c 后面声明，所以文字的颜色都是 yellow.

我想问的是：
就上面这个列子，有没有　以 DOM 结构中，就近原则　应用样式，而不是　以 css 声明中　的　先后顺序　应用样式　的写法．
请大家指教．

作者: xling 发布时间: 2011-05-17

帮你顶啊嘿嘿