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=“类名+空格+类名”，表示的是该元素同时拥有两个类