A combinator is a sign that explains the relationship between selectors.
The table below shows the different combinators in CSS:
| Name | Sign | Example | Example description |
|---|---|---|---|
| Child combinator | > | div > p | Selects every <p> element that are direct children of a <div> element |
| Descendant combinator | (single space) | div p | Selects all <p> elements inside <div> elements |
| Namespace separator | | | ns | h2 | Selects all <h2> elements in namespace ns |
| Next-sibling combinator | + | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| Selector list | , | div, p | Selects all <div> elements and all <p> elements |
| Subsequent-sibling combinator | ~ | p ~ ul | Selects all <ul> elements that are preceded by a <p> element |
Related
CSS Selectors
CSS selectors are used to “find” (or select) the HTML elements you want to style.
Minify CSS and JavaScript
发布博客时，压缩CSS和JavaScript文件的大小，能提升网页的加载速度，这里介绍使用cssnano和Terser工具来压缩。