CSS派生选择器用法详解

开发 前端
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在CSS2中,它们称为CSS派生选择器,这里就向大家简单介绍一下CSS选择器的概念及用法。

本文向大家描述一下CSS派生选择器的使用,CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使HTML代码变得更加整洁。

CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

在CSS1中,通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中,它们称为CSS派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。

CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使HTML代码变得更加整洁。

比方说,你希望列表中的strong元素变为斜体字,而不是通常的粗体字,可以这样定义一个CSS派生选择器:

  1. listrong{  
  2. font-style:italic;  
  3. font-weight:normal;  
  4. }  
  5.  

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

  1. <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,
  2. 所以这个规则对我不起作用</strong></p> 
  3.  
  4. <ol> 
  5. <li><strong>我是斜体字。这是因为strong元素位于li元素内。</strong></li> 
  6. <li>我是正常的字体。</li> 
  7. </ol> 
  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: 

  1. <p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p> 
  2. <h2>Thissubheadisalsored.</h2> 
  3. <h2>Thestronglyemphasizedwordinthissubheadis<strong>blue</strong>.</h2> 
  4.  

【编辑推荐】

  1. 轻松实现CSS样式实时切换技巧
  2. CSS中display:inline-block属性妙用
  3. CSS2.0中最常用的十八般兵器
  4. CSS控制input样式和悬停交互
  5. 解读CSS中position属性四大可选值用法

 

责任编辑:佚名 来源: w3school.com.cn
相关推荐

2010-09-06 09:57:01

CSS类选择器CSS

2010-09-06 09:50:34

id选择器CSS

2010-09-07 12:56:49

id选择器CSS

2010-09-07 11:22:51

CSS类选择器CSS

2010-08-30 14:47:47

CSS选择器

2010-09-08 15:59:51

CSS选择器CSS

2010-09-07 11:31:23

CSS派生选择器CSS

2010-09-02 15:12:28

CSS属性值选择器

2010-09-07 11:14:32

CSS属性选择器CSS

2010-08-26 12:47:15

CSSclass

2010-09-06 09:41:28

CSS继承

2010-09-06 16:37:58

2010-09-16 15:32:20

CSS选择器

2010-08-24 08:47:20

paddingCSS

2010-09-03 09:30:29

CSS选择器

2013-03-11 10:30:56

CSSWeb

2023-03-16 10:20:55

CSS选择器

2010-08-26 12:53:40

CSSid选择器

2010-09-03 12:46:28

CSSexpression

2010-08-23 15:33:47

CSSpadding
点赞
收藏

51CTO技术栈公众号