CSS里面的的为什么有逗号?

html-css016

CSS里面的的为什么有逗号?,第1张

.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:196pxfloat:leftmargin: 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:196pxfloat:leftmargin: 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中 用逗号隔开表示两个不同类的样式类名用同一个样式;

空格隔开表示从属包含关系,是当前的元素子元素;

逗号隔开表示并列关系,两者之间没有任何关系,可以使用同一个样式。

比如下面的代码示例:

<div class="content">

    <span class="content-child">子内容</span>

内容</div>

<div class="conter">内容2</div>

<style>

    .content .content-child{

        color:red//空格隔开表示在类content下的类样式.content-child的样式被改变了

    }

    .content,conter{

        color:#ffd014//逗号表示在不同的类下,样式都被改变。

    }

</style>