复合选择器（多选择器）

comegoing-归去兮来

已于 2022-07-31 09:07:34 修改

阅读量143

点赞数

分类专栏：前端css基础文章标签：前端 css html

于 2022-07-11 17:27:16 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125725841

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

注意：以下所有css样式均基于内联样式表格式

一、交集选择器

1、原理

（1）符合多要求集一身的选择器

（2）抽象而言类似于交集

2、格式

选择器格式1+选择器格式2+ ~~~ +选择器n+大括号（忽略加号，直接连接）

3、例子（以此类推）

（1）标签选择器+类选择器（h1标签中类属性为title的选择器）

h1.title{color: red;font-size: 40px;}

（2）类选择器+类选择器（类为pra且为txt1）

<p class="pra txt1">我是段落1</p>

.pra.txt1{color: white;font-size: 100px;}

（3）类选择器+id选择器（类为haha，id为s）

.haha#s{color: orange;}

二、选择器分组（并集选择器）

1、原理

（1）但凡符合单一条件即可作为选择器

（2）抽象而言类似于并集

2、格式

选择器1，选择器2，~~~，选择器n+大括号（必须为英文逗号，忽略加号）

3、例子

满足为类pra或者类haha

.pra,.haha{color: blue;font-size: 40px;}

三、代码

代码存在样式冲突的情况，请根据情况加注释（选择器优先级在后续内容介绍）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>复合选择器</title>
    <style>
        /* 交集选择器 */
        h1.title{
            color: red;
            font-size: 40px;
        }
        h2.title{
            color: black;
            font-size: 20px;
        }
        /* 选择器分组（并集选择器） */
        .pra,.haha{
            color: blue;
            font-size: 40px;
        }
        .pra.txt1{
            color: white;
            font-size: 100px;
        }
        .haha#s{
            color: orange;
        }
    </style>
</head>
<body>
    <h1 class="title">我是标题</h1>
    <h2 class="title">我是小标题</h2>
    <p class="pra txt1">我是段落1</p>
    <p class="pra">我是段落二</p>
    <p class="pra" id="last">我是句子</p>
    <span class="haha" id="s">哈哈</span>
</body>
</html>