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

你好，我是云桃桃。

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

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

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

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

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

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

前言

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

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

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

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

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

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

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

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

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

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

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

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