css样式 逗号和空格的区别

html-css08

css样式 逗号和空格的区别,第1张

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>

目前好像只有这个:&nbps

以下是引用片段:

<style type="text/css">

td .b {

color:#00ff00

}

th.b {

color:#ff0000

font-family:黑体

font-size:20px

}

.b {

color:#0000ff

font-size:12px

}

</style>

<table>

<tr>

<td><div class="b">第一个类b的类路径是th .b</div></td>

<th class="b">第二个类b的类路径是th.b</td>

<td class="b">第三个类b的类路径是 .b</th>

</tr>

</table>

<div class="b">第三个类b的类路径是 .b</div>