最近在搞跨平台开发,用到了CSS,其实只要涉及到Web的都会用到!
一开始看的头大,不知道,选择器啥意思,
后来知道了,又不知道,为啥选择器许多个能并列,
后来又知道了,又又不知道了,为啥中间一个空格,影响这么大!
终于大概知道的全了,
为怕忘记,特记录如下。
HTML文档是一棵树的结构,各元素以一种层次结构为基础构成‘树’的视图。
文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了‘父子关系’。
基于这样的关系模型,CSS定义了后代选择器(descendant selector)也称为上下文选择器(contextual selector)。
选择器,的写法为:.名字{......}
/* 所有class属性值为blue的div元素显示为红色字体 */ div.red {color:red;}
后代选择器,的写法为:子代元素以空格与父元素形成连接关系构成选择器
/* 作为div元素后代的任何span元素显示为蓝色字体 */ div span{color:blue;} /* 作为div元素后代的任何class属性值为blue的元素显示为蓝色字体 */ div .Yellow{color:Yellow;} /* 所有class属性值为contain的div元素,其后代中class属性值为blue的任何元素显示为蓝色字体*/ div.aaa .bbb{color:green;}
多类选择器,的写法为:选择器之间不能有空格。
/* 多类选择器*/ div.aaa.bbb{color:purple;}
综上,选择器之间的空格是一种结合符,如果要构成后代选择器,则空格两边的选择符必须为如下两种形式:
元素选择符 空格 元素选择符
非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形:元素选择符 [空格] 非元素选择符。
最重要一点:两个类选择器之间存在空格则构成后代选择器,之间没有空格的则构成多类选择器。
下面上真货
<!DOCTYPE html> <html> <head> <style type="text/css"> /*--------------------------------------------- 1*/ /* 作为div元素后代的任何span元素显示为蓝色字体 */ div span{color:blue;} /*--------------------------------------------- 2*/ /* 所有class属性值为blue的div元素显示为红色字体 */ div.red {color:red;} /*--------------------------------------------- 3*/ /* 作为div元素后代的任何class属性值为blue的元素显示为蓝色字体 */ div .Yellow{color:Yellow;} /*--------------------------------------------- 4*/ /* 所有class属性值为contain的div元素,其后代中class属性值为blue的任何元素显示为蓝色字体*/ div.aaa .bbb{color:green;} /*--------------------------------------------- 5*/ /* 多类选择器*/ div.aaa.bbb{color:purple;} </style> </head> <body> <b><h2> --------------------------------------------- 1 <div> this is span 1 <br> <span>this is span 2</span> <br> this is span 3 </div> --------------------------------------------- 2 <div class="red"> this is span 1 <br> <sss>this is span 2</sss> <br> </div> --------------------------------------------- 3 <div> this is span 1 <br> <sss>this is span 2</sss> <br> <sss class="Yellow">this is span 3</sss> </div> --------------------------------------------- 4 <div class="aaa"> <sss>this is span 1</sss> <br> <sss class="bbb">this is span 2</sss> <br> </div> --------------------------------------------- 5 <div class="aaa"> this is span 1 <br> </div> <div class="bbb"> this is span 2 <br> </div> <div class="aaa bbb"> this is span 3 <br> </div> <div class="bbb aaa"> this is span 4 <br> </div> <div class="aaa"> <div class="bbb"> this is span 5 <br> </div> </div> <div class="bbb"> <div class="aaa"> this is span 6 <br> </div> </div> <h2><b> </body> </html>
吃水不忘挖井人
参考:浅谈CSS选择器中的空格 http://www.cnblogs.com/hellolong/articles/4021926.html