CSS里面逗号和分号的区别
2015-08-12 18:18
906 查看
ad_stu , .ad_2 , .ad_house{ ... } 这里用了逗号,作用是表示这3个class用的是相同的css属性。 而如果用空格,变成这样:.ad_stu .ad_2 .ad_house{ ... },其意思就全变了。这样用空格分开,变成了在ad_stu这个容器里有一个叫ad_2的容器,而在ad_2这个容器里,又包含着一个叫ad_house的容器。最终仅仅是ad_house这个容器有这些css属性。另外2个容器是没有这些属性的。 给你举个例子(例1): <div class="ad_stu">我是容器A</div> <div class="ad_2">我是容器B</div> <div class="ad_house">我是容器C</div> css写成:.ad_stu , .ad_2 , .ad_house{ height:196px; float:left; margin: 5px 0 0 6px; } 这时,上面A、B、C三个容器,呈现出来的效果是完全一样的,都是靠左浮动,高度都是196像素; 而如果用空格区分上面3个class,仍然用上面3个div结构的话,这3个容器将不会有任何效果的。 除非改成(例2): <div class="ad_stu"> <div class="ad_2"> <div class="ad_house"> 我是容器3 </div> </div> </div> 这样的话,css写成:.ad_stu .ad_2 .ad_house{ height:196px; float:left; margin: 5px 0 0 6px; } 这时,ad_house这个容器将呈现出来的效果就是高196像素,左浮动。。。而ad_stu,ad_2这2个容器,如果你不单独对其进行定义,将没有任何样式效果。 同样是上面例2这个例子,我加多一个div,变成如下 <div class="ad_stu"> <div class="ad_2"> <div class="ad_house"> 我是容器3 </div> </div> </div> <div class="ad_house">我也是ad_house</div> 可以看到,下面加多了一个类名也叫ad_house的div,但是这个单独的ad_house同样是没有效果的。因为css中写明了,只有ad_stu下面的ad_2下面的ad_house设置了css属性。
相关文章推荐
- CSS中的下划线text-decoration属性使用进阶
- CSS3盒子阴影box-shadow
- css实现元素居中
- css元素position定位和z-index
- CSS的position
- css3中单位rem与.less结合布局
- Datagrid中设置样式
- Qt 样式表中定位所需要图标在整张图片中的位置(一张图告诉你)
- html+css清楚浮动3种方法,父级div获取高度
- Font Awesome图标字体库和CSS框架
- 几个好看的表格样式
- selenium CSS Selectors基础用法
- 如何通过CSS3实现背景图片色彩的梯度渐变
- html页面的CSS、DIV命名规则
- CSS浮动(float,clear)通俗讲解
- CSS Hack
- 原生js获取元素样式
- 常用CSS样式属性|CSS样式表
- CSS3给页面打标签
- css中position的理解