白骑士的CSS教学语法基础之选择器 2.1.2 组合选择器

最新推荐文章于 2024-08-26 19:13:51 发布

白骑士所长

最新推荐文章于 2024-08-26 19:13:51 发布

阅读量444

点赞数 5

分类专栏： CSS 教学文章标签： css 前端 css3

本文链接：https://blog.csdn.net/JeremyTC/article/details/141322093

版权

170 篇文章 2 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

组合选择器用于更精确地选择 HTML 元素，依据它们之间的关系来应用样式。组合选择器包括后代选择器、子选择器和兄弟选择器，每种选择器具有不同的匹配方式和应用场景。

后代选择器

后代选择器用于选择某个元素内的所有指定类型的后代元素。它通过空格来分隔选择器，表示后代关系。后代选择器可以选择任何嵌套在目标元素内的元素，无论它们的层级深度如何。

语法：

ancestor descendant {
  property: value;
}

示例：

/* 选择所有位于 <div> 元素内的 <p> 元素 */
div p {
  color: blue;
}

/* 选择所有位于 <section> 元素内的 <a> 元素 */
section a {
  text-decoration: none;
}

解释：

子选择器用于选择某个元素的直接子元素。它通过 ‘>‘ 符号来分隔选择器，表示直接子元素关系。子选择器只匹配紧接在目标元素下的直接子元素，不会匹配更深层级的嵌套元素。

语法：

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;
}

解释：

普通兄弟选择器用于选择某个元素之后的所有同级元素。它通过 ‘~‘ 符号来分隔选择器，表示普通的兄弟关系。普通兄弟选择器匹配在目标元素之后的所有同级元素，无论它们是第一个还是之后的元素。

语法：

first ~ sibling {
  property: value;
}

示例：

/* 选择所有在 <h2> 元素之后的 <p> 元素 */
h2 ~ p {
  color: green;
}

/* 选择所有在 <section> 元素之后的 <div> 元素 */
section ~ div {
  margin-top: 10px;
}

解释：

组合选择器使得 CSS 能够更精确地选择和样式化 HTML 元素。后代选择器选择所有指定类型的后代元素，子选择器只选择直接子元素，相邻兄弟选择器选择紧接在目标元素后的第一个同级元素，而普通兄弟选择器选择在目标元素之后的所有同级元素。通过使用这些选择器，开发者可以更灵活地控制元素的样式和布局。

关注