相邻兄弟选择器、后代选择器和子选择器三者有什么区别?

在 CSS 中,相邻兄弟选择器、后代选择器和子选择器都是用来选择特定 HTML 元素的,但它们选择的目标元素和选择方式有所不同:

  • 子选择器(>: 只选择作为指定父元素直接子元素的元素。换句话说,它只选择父元素的第一级子元素,不会选择更深层次的子孙元素。

    <div>
        <p>This paragraph is a direct child.</p>  <!-- 会被选中 -->
        <section>
            <p>This paragraph is a grandchild, not a direct child.</p> <!-- 不会被选中 -->
        </section>
    </div>
    
    div > p { color: blue; } 
    
  • 后代选择器(空格): 选择指定元素的所有后代元素,无论它们嵌套的层级有多深。只要是指定元素内部的元素,都会被选中。

    <div>
        <p>This paragraph is a descendant.</p> <!-- 会被选中 -->
        <section>
            <p>This paragraph is also a descendant.</p> <!-- 也会被选中 -->
        </section>
    </div>
    
    div p { color: green; }
    
  • 相邻兄弟选择器(+: 选择紧跟在指定元素后的第一个兄弟元素。这两个元素必须拥有相同的父元素,并且被选择的元素必须直接跟在指定元素之后。

    <div>
        <p>First paragraph.</p>
        <p>Second paragraph (adjacent sibling).</p> <!-- 会被选中 -->
        <p>Third paragraph.</p> <!-- 不会被选中 -->
    </div>
    
    p + p { color: red; }
    

总结:

选择器 符号 选择目标
子选择器 > 直接子元素
后代选择器 空格 所有后代元素
相邻兄弟选择器 + 紧跟其后的第一个兄弟元素

理解这些选择器的区别对于编写高效、精准的 CSS 样式至关重要。 通过选择正确的选择器,可以避免不必要的样式应用,并提高网站的性能。

posted @   王铁柱6  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示