css样式中逗号和空格选择的区别是什么?

css样式中逗号(E,F)和空格(E F)选择的区别是什么?下面本篇文章就来给大家简单介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css样式中逗号和空格选择的区别

  1. css中 用逗号隔开表示两个不同类的样式类名用同一个样式;

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

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

  4. 比如下面的代码示例:

<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>

更多css的相关知识,可访问:web前端自学!!

以上就是css样式中逗号和空格选择的区别是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读