设为首页收藏本站
开启辅助访问

创星网络[分享知识 传递快乐]

 找回密码
 立即注册

QQ登录

只需一步，快速开始

用新浪微博登录

只需一步，快速搞定

搜索
创星网络[分享知识 传递快乐] › 门户 ›网页编程语言› HTML/CSS› CSS › 查看内容

CSS派生选择器用法详解

2012-8-8 10:43| 发布者: cryinglily| 查看: 504| 评论: 0|原作者: luinstein

摘要: 本文向大家描述一下CSS派生选择器的使用，CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。 CSS派生选择器 通过依据元素在其位置的上下 ...
本文向大家描述一下CSS派生选择器的使用，CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。
  CSS派生选择器
  通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
  在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为CSS派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
  CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。
  比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个CSS派生选择器：
     

       
  1. listrong{      
  2. font-style:italic;      
  3. font-weight:normal;      
  4. }      
复制代码

   
  
  请注意标记为<strong>的蓝色代码的上下文关系：
     

       
  1. 我是粗体字，不是斜体字，因为我不在列表当中，   
  2. 所以这个规则对我不起作用     
  3.      
  4.      
  5. 我是斜体字。这是因为strong元素位于li元素内。     
  6. 我是正常的字体。     
  7.      
  8.    
复制代码


  
  在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。
  再看看下面的CSS派生选择器的规则：
     

       

  1. strong{      
  2. color:red;      
  3. }      
  4.      
  5. h2{      
  6. color:red;      
  7. }      
  8.      
  9. h2strong{      
  10. color:blue;      
  11. }      
  12.    
复制代码

  
  下面是它施加影响的HTML：
     

       
  • Thestronglyemphasizedwordinthisparagraphisred.
  • Thissubheadisalsored.
  • Thestronglyemphasizedwordinthissubheadisblue.

  
原文:http://developer.51cto.com/art/201009/224054.htm

鲜花
握手
雷人
路过
鸡蛋
收藏 分享 邀请

相关分类

QQ|Archiver|手机版|小黑屋|创星网络 ( 苏ICP备11027519号 ) |网站地图  

GMT+8, 2024-5-17 12:59 , Processed in 0.052117 second(s), 16 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

返回顶部