HTML组合选择器的概念是什么

本文小编为大家详细介绍“HTML组合选择器的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML组合选择器的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

 将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。语法：A, B 例如：div, span 会同时匹配 <span> 元素和 <div> 元素。

组合器（Combinators）

下图是一个HTML文档DOM结构图。其中，html是根节点，head和body是html的孩子节点。head和body又互相为紧邻兄弟节点。div是body的孩子节点，是html的后代节点。这里我们说的孩子是指有相同的父亲节点，而后代则包含了孩子和孙子以及孙子下面的孩子孙子等。紧邻兄弟是指有相同的父亲节点的，且彼此相邻的兄弟。如果不是彼此相邻，则称为一般兄弟。

后代组合器（Descendant combinator）

（空格）组合器选择前一个元素的后代节点。

语法：A B

例子：div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。

子代组合器（Child combinator）

> 组合器选择前一个元素的直接子节点。

语法：A > B

例子：ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。

一般兄弟组合器（General sibling combinator）

~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

语法：A ~ B

例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。

紧邻兄弟组合器（Adjacent sibling combinator）

+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

语法：A + B

例子：h3 + p 会匹配所有紧邻在 <h3> 元素后的 <p> 元素。

读到这里，这篇“HTML组合选择器的概念是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。