css样式中空格，逗号等他们的区别

1.css元素用逗号隔开：这两个元素可以没有任何关系，但是他们共用同一个css属性

<div class="father1">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
    <div class="son3">son3</div>
</div>
<div class="father2">
    <div class="son4">son4</div>
</div>
.son1,.son2,.son3,.son4{
    width: 300px;
    height: 50px;
    margin: 10px;
}
.father1,.son4{
     background-color: aqua;
}

2.css元素用空格隔开：这个两个元素是父子关系

.father2 .son4{
    background-color: yellow;
}

3.css中~表示同一个父元素下面所有相同的子元素

        .father1~div{
            background-color: orange;
        }

4.css中>表示选择其所有相同的子元素

        .father1>div{
            background-color: pink;
        }