[分享]css元素选择器带空格

CSS元素选择器带空格是指多个元素之间存在空格，表示选择器的上下级关系。例如：

/*选取class为parent下的所有子元素*/
.parent * {
    background-color: yellow;
} 

在上述代码中，“*”代表所有元素，“.parent”代表class为parent的元素，两者之间存在空格，表示选择器的上下级关系。此时，“*”被称为“后代选择器”，意思是匹配所有子孙元素，不限层级。

另一个常见的CSS元素选择器带空格是“子选择器”（“>”符号），表示选取某个元素的直接子元素。例如：

/*选取所有class为parent的直接子元素*/
.parent > * {
    color: red;
} 

在上述代码中，“>”表示选择“parent”中的直接子元素，“*”代表所有元素，表示选择所有class为parent的直接子元素。此时，“>”被称为子选择器，只匹配指定元素的直接子元素。

元素选择器带空格的应用场景，除了上述例子之外，还可以用于优化CSS样式，选择器判断不必要的重复操作。