css的选择器-逗号、空格分隔和连写的区别

css的选择器-逗号、空格分隔和连写的区别

1.连写

.a.b{
    background-color:pink;
}

当两个元素名写在一起时，表示当前元素在html中同时出现才会出现效果，即

<div class="a b">hello</div>

2.逗号

.a,.b{
    background-color:pink;
}

当两个元素名用逗号分隔时，表示当前元素在html中，出现其中一个就会出现效果，它们之间属于并列关系，即

<div class="a">hello</div>
<div class="b">hello</div>

3.空格

.a .b{
    background-color:pink;
}

当两个元素名之间用空格分隔时，表示后代选择器，选择的是.a内的.b，只有当前的子元素才会出现效果，它们之间属于从属包含关系,即

<div class="a">
	hello1
	<div class="b">hello2</div>
</div>

补充：html中的class=“类名+空格+类名”，表示的是该元素同时拥有两个类