CSS基础：4类组合选择器以及5个注意事项

最新推荐文章于 2024-09-11 10:34:35 发布

云桃桃前端

最新推荐文章于 2024-09-11 10:34:35 发布

阅读量863

点赞数 12

文章标签： css 前端 css3 html5 html

本文链接：https://blog.csdn.net/u013179804/article/details/138199015

版权

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

284篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

要说组合选择器，我们先回顾下简单选择器。

CSS 中的简单选择器包括以下 4 种：

标签选择器（Element Selector）：通过 HTML 元素名称作为选择器，如p、div、a等。
类选择器（Class Selector）：通过类名作为选择器，以.开头，如.red-text、.btn等。
ID 选择器（ID Selector）：通过 ID 属性作为选择器，以#开头，如#header、#content等。
通用选择器（Universal Selector）：选择所有元素，使用*作为选择器。

而组合选择器是由多个简单选择器组合而成的选择器，用于更精确地选择 HTML 元素，尤其在一个页面内容多，网页也众多的场景下。那我们一起来看看吧。

4 类组合选择器

一、后代选择器

（Descendant Selector）：用空格分隔不同元素，选择某个元素的后代元素，如div p、ul li等。以下是 3 个使用后代选择器的 CSS 案例：

设置页面中所有（.content-box里面的 p 段落标签元素）的样式：

.content-box p {
  color: #333; /* 设置文字颜色 */
  font-size: 16px; /* 设置字体大小 */
  line-height: 1.5; /* 设置行高 */
}

设置导航栏中所有列表项（<li>元素）的样式：

.navbar li {
  display: inline-block; /* 设置为行内块级元素 */
  margin-right: 10px; /* 设置右侧外边距 */
}

设置表格中所有表头单元格（<th>元素）的样式：

table th {
  background-color: #f2f2f2; /* 设置背景颜色 */
  color: #333; /* 设置文字颜色 */
  font-weight: bold; /* 设置字体加粗 */
}

二、子元素选择器

（Child Selector）：用>符号选择某个元素的直接子元素，如ul > li、div > p等。以下是 3 个使用子元素选择器的 CSS 案例：

选择导航栏中直接的列表项（不包括子菜单）：

.navbar > ul > li {
  display: inline-block;
  margin-right: 10px;
}

选择表格中直接的表头行（不包括表头中的单元格）：

table > thead > tr {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}

选择表单中的下拉选择框：

form > select {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
}

三、相邻兄弟选择器

（Adjacent Sibling Selector）：用+符号选择紧接在某个元素后面的同级元素，如h2 + p、div + p等。以下是 3 个使用相邻兄弟选择器的 CSS 案例：

选择文章标题后的第一个段落：

h2 + p {
  font-weight: bold;
}

选择导航栏中当前项后的下一个列表项：

.nav-item.current + .nav-item {
  font-weight: bold;
}

选择表格中第一行数据后的下一行数据：

tr + tr {
  background-color: #f2f2f2;
}

四、通用兄弟选择器

（General Sibling Selector）：用~符号选择某个元素后面所有同级元素，如h2 ~ p、div ~ p等。

以下是 3 个使用通用兄弟选择器的 CSS 案例：

选择文章标题后的所有段落：

h2 ~ p {
  margin-top: 10px;
}

选择导航栏中当前项后的所有列表项：

.nav-item.current ~ .nav-item {
  opacity: 0.5;
}

选择表格中第一行数据后的所有行数据：

tr:first-child ~ tr {
  border-top: 1px solid #ccc;
}

如何选择这 4 种选择器？

在项目中选择合适的组合选择器取决于具体的需求和设计目标，以下是一些选择器写作的建议：

后代选择器（Descendant Selector）：适合用于选择嵌套结构中的后代元素，例如选择特定容器内的子元素，或者选择文章内容中的段落和标题。
子元素选择器（Child Selector）：适合用于选择某个元素的直接子元素，这在设计有嵌套结构的导航菜单或树形菜单时特别有用。
相邻兄弟选择器（Adjacent Sibling Selector）：用于选择紧接在某个元素后面的同级元素，适合用于创建特定样式的相邻元素，例如列表项与列表项之间的分隔线。
通用兄弟选择器（General Sibling Selector）：用于选择某个元素后面所有同级元素，适合用于处理表格中除第一行外的所有行、或者列表中除第一个列表项外的所有项的样式。

综合考虑项目的结构、设计需求以及选择器的特性，可以灵活运用这些组合选择器，提高样式的精准度和可维护性。

注意事项

写组合选择器需要注意什么呢，我认为有以下 5 个方面：

选择器的复杂度：组合选择器的复杂度越高，其匹配的元素也越具体。因此，在使用组合选择器时，应该根据实际需要和设计目标合理选择选择器的复杂度，避免过度嵌套和复杂的选择器结构。
选择器的可读性：选择器的命名应该具有一定的可读性和语义化，使得其他开发者能够快速理解选择器的作用和目的。选择器命名应该简洁明了，不宜过长或过于复杂。
避免选择器冲突：在编写组合选择器时，需要注意避免选择器冲突的问题，特别是在多人协作或引入第三方样式库的情况下。可以通过使用较具体的选择器、使用命名空间或者避免全局作用选择器等方式来减少选择器冲突。
灵活运用通用选择器：通用选择器（Universal Selector）可以用来选择页面上的所有元素，但过度使用通用选择器可能会影响页面性能。因此，在使用通用选择器时应该谨慎，尽量选择更具体的选择器来减少匹配元素的数量。
考虑选择器的权重：不同类型的选择器具有不同的权重，例如 ID 选择器的权重高于类选择器、属性选择器和标签选择器。在编写组合选择器时，需要考虑选择器的权重，避免样式被其他具有更高权重的选择器覆盖。关于这个权重问题，后面会写到。