首页 > 学习 > 设计学院 > CSS > CSS选择器中的空格的不同作用

CSS选择器中的空格的不同作用

分享&收藏
时间:2011-03-24 16:05:42   
  [导读] css的规则里总有不同的关系,一个空格也有不同的用法,不同的地方用空格可以有不同的效果,这就值得很多朋友们注意了,不要因为一个小小的空格到时连错在哪里都没发现......
  [正文]

HTML文档是一棵树的结构,各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了‘父子关系’。基于这样的关系模型,CSS定义了后代选择器(descendant selector)也称为上下文选择器(contextual selector)。

后代选择器的写法为,子代元素以空格与父元素形成连接关系构成选择器,如:

div span{color:blue;}

以上规则的结果为:“作为div元素后代的任何span元素显示为蓝色字体”。

选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”,但是要求必须从右向左读选择器——《CSS权威指南》第三版

CSS还有两种选择器:类选择器和ID选择器,个中细则不是本文陈述的重点。本文的重点是:空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题,及解决方式。

先看看以下的规则:

div.blue {color:blue;}

以上规则的结果为:“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样,我的要求是:“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则:

div .blue{color:blue;

 

相关图文

上篇:下面没有链接了
下篇:主流CSS+DIV的命名规则规范
热门图文
最新文章