CSS语法基础——复合选择符

原创已于 2025-06-13 21:43:40 修改 · 479 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #html5

于 2025-04-25 17:49:27 首次发布

CSS 专栏收录该内容

9 篇文章

订阅专栏

选择符决定了格式化将应用于哪些元素。复合选择符是把多个简单选择符组合起来的选择符，其能更精准地选中网页元素。CSS复合选择符包括交集选择符、并集选择符和关系选择符，其中关系选择符又包括后代选择符、子代选择符、相邻兄弟选择符和通用兄弟选择符。

以前一篇HTML5页面的布局练习作业为例，通过复合关系选择符对给定类型的元素进行格式化，效果图如下（源代码在文章末尾）：

一、交集选择符

交集选择符由两个或更多简单选择符直接相连构成，元素必须同时满足所有简单选择符的条件才会被选中，从左到右推。

语法：选择符1.选择符2{...}。

注意：多个基本选择器之间不能有空格，直接相连。

举例：

    <style>
        p.highlight {
            color: red;
            font-weight: bold;
        }
    </style>

<body>
    <p>这是普通段落。</p>
    <p class="highlight">这是高亮段落。</p>
</body>

运行结果：

二、并集选择器

并集选择符用逗号分隔多个选择符，满足任意一个选择符条件的元素都会被选中。

语法：选择符1，选择符2{...}。

注意：选择器之间用逗号隔开

举例：

<style>
        p,
        .highlight {
            color: blue;
        }
    </style>

<body>
    <p>这是段落。</p>
    <span class="highlight">这是高亮的span元素。</span>
    
</body>

运行结果：

三、关系选择符

（一）后代关系选择符

后代选择符用空格分隔多个选择符，选择某个元素的所有后代元素。

语法：选择符1 选择符2{...}。

举例：

<style>
        div p {
            color: green;
        }
    </style>

<body>
    <div>
        <p>这是div内的段落。</p>
    </div>
    <p>这是div外的段落。</p>
</body>

运行结果：

（二）子代关系选择符

子选择符用大于号（>）分隔，选择某个元素的直接子元素，对更深一层的元素不起作用。

语法：选择符>选择符2{...}。

举例：

<style>
        div > p {
            color: purple;
        }
    </style>

<body>
    <div>
        <p>这是div的直接子段落。</p>
        <span>
            <p>这是div的间接子段落。</p>
        </span>
    </div>
</body>

运行结果：

（三）相邻兄弟关系选择符

相邻兄弟选择符用加号分隔，选择某个元素的下一个相邻兄弟元素，只能向下选择。

语法：选择符1+选择符2{...}。

举例：

<style>
        p + span {
            color: orange;
        }
    </style>

<body>
    <p>这是段落。</p>
    <span>这是段落后的相邻span元素。</span>
    <span>这是另一个span元素。</span>
</body>

运行结果;

<body>
    <p>这是段落。</p>
    <span>这是段落后的第一个span元素。</span>
    <div>这是div元素。</div>
    <span>这是段落后的另一个span元素。</span>
</body>

（四）通用兄弟关系选择符

通用兄弟选择符用波浪号~分隔，选择某个元素后的所有兄弟元素,只能向下选择。

语法：选择符1~选择符2{...}。

举例：

<style>
        p ~ span {
            color: brown;
        }
    </style>

<body>
    <p>这是段落。</p>
    <span>这是段落后的第一个span元素。</span>
    <div>这是div元素。</div>
    <span>这是段落后的另一个span元素。</span>
</body>

运行结果：

效果图源代码：

<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>典型的网页结构示例</title>  
    
    <style>
        h1~p{
            font-size: 40px;
        }
        header nav ul a{
            color: red;
        }
        main>section>article>h3{
            color: green;
        }
        h3+p{
            color: yellow;
        }

    </style>
</head>  

<body>  
  
    <header>  
        <h1 align="center">广东XXX学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> <!-- 水平分割线 -->  
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr> <!-- 水平分割线 -->   
    <main>  
        <section>  
            <h2>最新文章</h2>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./微信图片_20250508211523.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东XXX学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

            <br>
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section>  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr> <!-- 水平分割线 -->   
    <footer>  
        <p>版权所有 &copy; 2024 广东XXX学院计算机学院</p>  
    </footer>  
  
</body>  


</html>