CSS3基础——复合选择符的讲解和运用

最新推荐文章于 2025-06-10 17:59:46 发布

原创最新推荐文章于 2025-06-10 17:59:46 发布 · 454 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css

一、复合选择符

1、前言

在 HTML 里，CSS 复合选择符将简单的选择器组合，精准定位元素，方便网页设计者打造独特界面。复合选择符包括了交集选择符、并集选择符和关系选择符。

2、交集选择符

交集选择符由两个选择符直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个选择符必须是标签选择符，第二个选择符必须是 class 类选择符或 id 选择符。这两个选择符之间不能有空格，必须连续书写。基本格式为：

p.class{
    属性：属性值；
}

3、并集选择符

与交集选择符相对应的还有一种并集选择符,或者称为 “集体声明”。它的结果是同时选中各个基本选择符所覆盖的内容范围。任何形式的基本选择符都可以作为并集选择符的一部分。

例如，在集合中分别是< h1 >、< h2 >和< h3 >的标签选择符，“集体声明” 将为多个标签设置同一样式。其格式如下：

h1,h2,h3{
    属性:属性值;
}

4、关系选择符（重点）

① 后代选择符

后代选择符的作用是选择某个元素的所有后代元素。所谓后代元素，就是该元素内部嵌套的所有元素，包括子元素、孙元素等等，如选择 A 中包含的 B 元素，< ul >中的< li >。

后代选择符的语法是用空格把多个选择器分隔开，例如，后代选择符外层的标签是< h1 >，内层的标签是< span >，标签< span >就成为了标签< h1 >的后代。其格式如下：

h1 span{
    属性：属性值；
}

② 子代选择符

子代选择符（>）用于选取某元素的直接子元素。它比后代选择符更精准，只匹配一级子元素，能更加精确地控制样式。

例如，在下面这段代码中，< div >的直接子元素< p >会应用 color：red；的样式，而嵌套在< span >里面的< p >元素由于不是< div >的直接子元素，所以不会改变。

<title>子代选择符示例</title>
    <style>
        div > p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>这是 div 的直接子元素，文字颜色为红色</p>
        <span>
            <p>这不是 div 的直接子元素，文字颜色不变</p>
        </span>
    </div>

注：后代选择符是可跨代的，而子代选择符是不可跨代的。

③相邻兄弟选择符

相邻兄弟选择符能够选择紧跟在某个元素之后的兄弟元素，用加号（+）隔开，且两个元素必须有相同的父元素，即它们是兄弟关系。元素2 必须紧跟在元素1 之后，中间不能有其他元素间隔。

例如，在下面这段代码中，h1+p 选择器会把紧跟在 h1 后面的第一个 p 元素的文本颜色设为蓝色，其它 p 元素不受影响。

<head>
    <style>
        h1 + p {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>这个段落文字颜色会变蓝</p>
    <p>这个段落文字颜色不变</p>
</body>

④通用兄弟选择符

通用兄弟选择符用于选择在某个元素之后的所有兄弟元素，能够作用于多个元素，它使用波浪号（~）来分隔两个选择器。

例如，在下面这段代码中，h1~p 选择器会把 h1 元素之后的所有同级 p 元素的文本颜色设置为红色。

<head>
    <style>
        h1 ~ p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>此段落颜色变红</p>
    <p>此段落颜色也变红</p>
</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>
        .nav ul{
            color: red;
        }

        .article> h3{
            color: green;
        }

        h3+p{
            color: yellow;
        }

        button~p{
            font-style: italic;
        }
    </style>
</head>  

<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</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="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东云浮中医药职业学院：<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 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  
</html>