CSS层次选择器指的是通过元素在页面中嵌套的层次关系来选择对应的CSS样式。这种选择方式在复杂的页面布局中非常有用,因为它允许我们只选择特定的元素而不影响其他元素。
层次选择器有三种类型:后代选择器、子元素选择器和相邻兄弟选择器。
/* 后代选择器 */ nav ul li { margin-bottom: 10px; } /* 子元素选择器 */ nav > ul > li { padding-left: 20px; } /* 相邻兄弟选择器 */ h2 + p { font-size: 1.2em; }
后代选择器使用空格分隔元素,在样式中它选择了所有ul元素内部的li元素。这包括直接在ul中嵌套的li元素,也包括更深的嵌套关系。
子元素选择器使用大于号分隔元素,在样式中它选择了所有直接在ul元素下面的li元素。这意味着更深的嵌套li元素不会被选择。
相邻兄弟选择器使用加号分隔元素,在样式中它选择了所有紧随h2元素之后的p元素。这个选择方式非常有用,当我们想要样式不同的p元素分别紧随不同的标题元素时。
总之,层次选择器允许我们选择特定的元素,并将其与其他元素区分开来,这对于复杂的页面布局非常有帮助。