[分享]css中层级选择器

CSS中的层级选择器指的是通过不同元素之间的上下级关系来选择特定元素进行样式设置的方法。/ 父元素选择器 > 子元素选择器 / .parent > .child { / 样式设置 / } ...

CSS中的层级选择器指的是通过不同元素之间的上下级关系来选择特定元素进行样式设置的方法。

/* 父元素选择器 > 子元素选择器 */
.parent > .child {
    /* 样式设置 */
} 

这个层级选择器的意思是：选择class为parent的元素内部所有class为child的子元素进行样式设置。

/* 父元素后代元素选择器 空格*/
.parent .child {
    /* 样式设置 */
} 

这个层级选择器的意思是：选择class为parent的元素内部所有后代级别（即子孙级别）中class为child的元素进行样式设置。可以看出，它比父子选择器的范围更广泛。

/* 兄弟元素选择器 +*/
.first + .second {
    /* 样式设置 */
} 

这个层级选择器的意思是：选择class为first的元素紧接着后面的同级别的class为second的元素进行样式设置。注意：这个选择器只能选中紧接着的下一个同级元素。

/* 通用兄弟元素选择器 ~ */
.first ~ .second {
    /* 样式设置 */
} 

这个层级选择器的意思是：选择class为first的元素之后所有同级别的class为second的元素进行样式设置。注意：这个选择器可以选中后面的所有同级元素。