组合选择器用于更精确地选择 HTML 元素,依据它们之间的关系来应用样式。组合选择器包括后代选择器、子选择器和兄弟选择器,每种选择器具有不同的匹配方式和应用场景。
后代选择器
后代选择器用于选择某个元素内的所有指定类型的后代元素。它通过空格来分隔选择器,表示后代关系。后代选择器可以选择任何嵌套在目标元素内的元素,无论它们的层级深度如何。
语法:
ancestor descendant {
property: value;
}
示例:
/* 选择所有位于 <div> 元素内的 <p> 元素 */
div p {
color: blue;
}
/* 选择所有位于 <section> 元素内的 <a> 元素 */
section a {
text-decoration: none;
}
解释:
- ‘div p‘ 选择器会应用于所有 ‘<div>‘ 元素内的 ‘<p>‘ 元素,不论 ‘<p>‘ 元素的层级多深,文本颜色将被设置为蓝色。
- ‘section a‘ 选择器会应用于所有 ‘<section>‘ 元素内的 ‘<a>‘ 元素,去掉其下划线。
子选择器
子选择器用于选择某个元素的直接子元素。它通过 ‘>‘ 符号来分隔选择器,表示直接子元素关系。子选择器只匹配紧接在目标元素下的直接子元素,不会匹配更深层级的嵌套元素。
语法:
parent > child {
property: value;
}
示例:
/* 选择所有直接位于 <ul> 元素下的 <li> 元素 */
ul > li {
color: red;
}
/* 选择所有直接位于 <article> 元素下的 <h2> 元素 */
article > h2 {
font-size: 20px;
}
解释:
- ‘ul > li‘ 选择器会应用于所有直接位于 ‘<ul>‘ 元素下的 ‘<li>‘ 元素,文本颜色设置为红色,不会影响 ‘<ul>‘ 内嵌套更深的 ‘<li>‘ 元素。
- ‘article > h2‘ 选择器会应用于所有直接位于 ‘<article>‘ 元素下的 ‘<h2>‘ 元素,字体大小设置为 20px。
相邻兄弟选择器
相邻兄弟选择器用于选择某个元素紧接着的第一个同级元素。它通过 ‘+‘ 符号来分隔选择器,表示相邻的兄弟关系。相邻兄弟选择器只匹配紧接在目标元素后的第一个同级元素。
语法:
first + sibling {
property: value;
}
示例:
/* 选择所有紧接在 <h2> 元素后的 <p> 元素 */
h2 + p {
margin-top: 0;
}
/* 选择所有紧接在 <section> 元素后的 <div> 元素 */
section + div {
border: 1px solid black;
}
解释:
- ‘h2 + p‘ 选择器会应用于所有紧接在 ‘<h2>‘ 元素后的 ‘<p>‘ 元素,将其上边距设置为 0。
- ‘section + div‘ 选择器会应用于所有紧接在 ‘<section>‘ 元素后的 ‘<div>‘ 元素,为其添加黑色边框。
普通兄弟选择器
普通兄弟选择器用于选择某个元素之后的所有同级元素。它通过 ‘~‘ 符号来分隔选择器,表示普通的兄弟关系。普通兄弟选择器匹配在目标元素之后的所有同级元素,无论它们是第一个还是之后的元素。
语法:
first ~ sibling {
property: value;
}
示例:
/* 选择所有在 <h2> 元素之后的 <p> 元素 */
h2 ~ p {
color: green;
}
/* 选择所有在 <section> 元素之后的 <div> 元素 */
section ~ div {
margin-top: 10px;
}
解释:
- ‘h2 ~ p‘ 选择器会应用于所有在 ‘<h2>‘ 元素之后的 ‘<p>‘ 元素,将文本颜色设置为绿色。
- ‘section ~ div‘ 选择器会应用于所有在 ‘<section>‘ 元素之后的 ‘<div>‘ 元素,将其上边距设置为 10px。
总结
组合选择器使得 CSS 能够更精确地选择和样式化 HTML 元素。后代选择器选择所有指定类型的后代元素,子选择器只选择直接子元素,相邻兄弟选择器选择紧接在目标元素后的第一个同级元素,而普通兄弟选择器选择在目标元素之后的所有同级元素。通过使用这些选择器,开发者可以更灵活地控制元素的样式和布局。