css后代选择器的使用-css教程-PHP中文网

css后代选择器的使用

冷漠man

发布： 2025-12-18 09:06:07

原创

497人浏览过

后代选择器用于选中某元素内所有特定后代元素，通过空格分隔选择器实现，如.container p会匹配class为container的元素内部所有p标签，无论嵌套多深。

css后代选择器的使用

在CSS中，后代选择器用于选中某个元素内部的所有特定后代元素，即使它们不是直接子元素也能被匹配。它通过空格分隔两个或多个选择器来实现。

什么是后代选择器

后代选择器由两个或多个选择器组成，中间用空格分开。它会选中第一个选择器所匹配元素的“所有”后代中符合第二个选择器的元素，不论嵌套多深。

例如：

.container p 会选中 class 为 container 的元素内部所有的

标签，包括孙子、曾孙级别的 p 元素。

基本语法和示例

格式： 父选择器后代选择器

立即学习“前端免费学习笔记（深入）”；

常见组合：

div span：选中所有 div 内部的 span 元素
.nav a：选中 class 为 nav 的元素里所有的链接（a 标签）
#header .logo img：选中 id 为 header 的元素中，class 为 logo 的元素内的所有 img

HTML 示例：

<div class="article">
  <p>这是一段文字</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/6107">
                            <img src="https://img.php.cn/upload/jscode/000/287/557/5fa1fe47b3377288.png" alt="纯CSS实现的卡片切换效果">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/6107">纯CSS实现的卡片切换效果</a>
                            <p>这是一款纯 CSS 实现的卡片切换效果，原理是通过单选按钮 radio 选择不同的按钮后，再使用 CSS 选择器选中对应的内容显示。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="纯CSS实现的卡片切换效果">
                                <span>187</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/6107" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="纯CSS实现的卡片切换效果">
                        </a>
                    </div>
                
  <section>
    <p>嵌套的段落</p>
  </section>
</div>

登录后复制

CSS 规则：