CSS组合与嵌套用法详解

开发 前端
CSS布局有很多值得学习的地方,那么你对CSS组合与嵌套的概念和用法是否理解,这里向大家描述一下,如果CSS结构好的话,没有必要使用过多的类或者标识选择符。

这里和大家重点描述一下CSS组合与嵌套的用法,对于CSS组合,你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。而对于CSS嵌套来说,CSS结构好的话,没有必要使用过多的类或者标识选择符。

CSS组合与嵌套用法详解

CSS组合

你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了,这就是CSS组合的好处。比如,你有如下的代码:

ExampleSourceCode

  1. h2{  
  2. color:red;  
  3. }  
  4. .thisOtherClass{  
  5. color:red;  
  6. }  
  7. .yetAnotherClass{  
  8. color:red;  
  9. }  
  10.  

则你可以这样写:

ExampleSourceCode

  1. h2,.thisOtherClass,.yetAnotherClass{  
  2. color:red;  
  3. }  
  4.  

CSS嵌套

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符,而不必使用CSS嵌套。(或者更好的说法,上下文选择符--译者著)
比如:

ExampleSourceCode

  1. #top{  
  2. background-color:#ccc;  
  3. padding:1em  
  4. }  
  5. #toph1{  
  6. color:#ff0;  
  7. }  
  8. #topp{  
  9. color:red;  
  10. font-weight:bold;  
  11. }  
  12.  

 这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:

ExampleSourceCode

  1. <dividdivid="top"> 
  2. <h1>Chocolatecurry</h1> 
  3. <p>Thisismyrecipeformakingcurrypurelywithchocolate</p> 
  4. <p>Mmmmmmmmmm</p> 
  5. </div> 
  6.  

这是因为,用英文半角空格间隔选择符,我们指明了在标识id内的h1有“#ff0”的颜色,而p则是红色red和粗体bold。这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。你有必要多加练习。
 

【编辑推荐】

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

 

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-24 08:47:20

paddingCSS

2010-08-26 11:01:00

ulliCSS

2010-09-03 12:46:28

CSSexpression

2010-08-23 15:33:47

CSSpadding

2010-09-01 13:37:58

CSSclip属性

2010-08-23 08:45:08

CSSpadding内边距

2010-09-07 16:46:59

CSSexpression

2010-09-08 13:01:20

atCSS

2010-09-08 16:22:32

PositionCSS

2010-09-02 15:32:51

CSSfloat

2010-09-03 11:12:48

CSSbox

2010-08-30 11:34:32

csspadding

2010-08-30 15:06:04

CSSfont-size

2010-08-31 08:51:58

marginCSS

2010-08-31 10:05:16

CSS Sprites

2010-09-06 09:34:16

CSS派生选择器

2010-08-27 09:19:32

CSS层叠继承

2010-08-23 09:11:18

padding-bot

2010-08-20 16:29:01

padding-lef

2010-09-14 15:04:42

list-styleCSS
点赞
收藏

51CTO技术栈公众号