溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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組合選擇器的概念是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
