CSS 组合选择器


CSS 组合选择器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间,我们可以包含一个组合器。

CSS 中有四种不同的组合选择器:

  • 后代选择器 (空格)
  • 子选择器 ( > )
  • 相邻兄弟选择器 ( + )
  • 通用兄弟选择器 ( ~ )

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div p {
  6. background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>后代选择器</h1>
  12. <p>后代选择器匹配作为指定元素后代的所有元素。</p>
  13. <div>
  14. <p>div 中的段落 1。</p>
  15. <p>div 中的段落 2。</p>
  16. <section><p>div 中的段落 3。</p></section>
  17. </div>
  18. <p>段落 4。不在 div 中。</p>
  19. <p>段落 5。不在 div 中。</p>
  20. </body>
  21. </html>

子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div > p {
  6. background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>子选择器</h1>
  12. <p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
  13. <div>
  14. <p>div 中的段落 1。</p>
  15. <p>div 中的段落 2。</p>
  16. <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  17. <p>div 中的段落 4。</p>
  18. </div>
  19. <p>段落 5。不在 div 中。</p>
  20. <p>段落 6。不在 div 中。</p>
  21. </body>
  22. </html>

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div + p {
  6. background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>相邻兄弟选择器</h1>
  12. <p>相邻的同胞选择器(+)选择所有作为指定元素的相邻的同级元素。</p>
  13. <div>
  14. <p>div 中的段落 1。</p>
  15. <p>div 中的段落 2。</p>
  16. </div>
  17. <p>段落 3。不在 div 中。</p>
  18. <p>段落 4。不在 div 中。</p>
  19. </body>
  20. </html>

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div ~ p {
  6. background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>通用兄弟选择器</h1>
  12. <p>通用的兄弟选择器(~)选择指定元素的所有同级元素。</p>
  13. <p>段落 1。</p>
  14. <div>
  15. <p>段落 2。</p>
  16. </div>
  17. <p>段落 3。</p>
  18. <code>一些代码。</code>
  19. <p>段落 4。</p>
  20. </body>
  21. </html>

所有 CSS 组合选择器

选择器示例示例描述
element elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择其父元素是 <div> 元素的所有 <p> 元素。
element+elementdiv + p选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。

分类导航