0 Comments

实例解析CSS选择符及其用法(2)

发布于:2013-11-06  |   作者:广州网站建设  |   已聚集:人围观
分组选择符(GroupingSelectors)

 

语法:E1,E2,E3

说明:将同样的定义应用于多个CSS选择符,可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符,属于CSS1选择符。

实例: 


  1. .test,p{color:#F00;}  
  2. <dividdivid="test">这里是测试内容</div> 
  3. <p>这里是测试内容</p> 
  4.  

通配选择符(UniversalSelectors)

语法:*

说明:选定DOM中的所有对象。目前所有主流浏览器均支持该CSS选择符,属于CSS2选择符。

实例:


  1. *{color:#F00;}  
  2. <div>这里是测试内容</div> 
  3. <p>这里是测试内容</p> 
  4.  

子选择符(ChildSelectors)
广州网站建设,网站建设,广州网页设计,广州网站设计

语法:E1>E2

说明:选择所有作为E1子对象的E2,不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。

实例:


  1. .test>strong{color:#F00;}  
  2. <divclassdivclass="test"> 
  3.  <strong>测试的内容</strong> 
  4.  <p>这是<strong>测试的内容</strong>哦!</p> 
  5.  <strong>测试的内容</strong> 
  6. </div> 

相邻选择符(AdjacentSelectors)

语法:E1+E2

说明:选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。

实例:


  1. p+p{color:#F00;}  
  2. <p>测试的内容1</p> 
  3. <p>测试的内容2</p> 
  4. <div>测试的内容3</div> 
  5. <p>测试的内容4</p> 
  6. <p>测试的内容5</p> 
  7. <div><p>测试的内容6</p></div> 
  8.  
飞机