3 组合选择器

页面元素比较复杂，存在多个嵌套。为了更加灵活选择页面中的元素，CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。

后代子代选择器
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*后代选择器*/

        .c1 .c2{

            color: red;

        }

        /*子代选择器*/

        .c3 .c5{

            color: red;

        }

        .c3 > .c5{

            color: red;

        }

        .c3 .c4 .c5{

            color: red;

        }

    </style>

</head>

<body>

<!--后代选择器-->

<div class="c1">

    <div class="c2">item1</div>

</div>

<div class="c2">item2</div>

<!--子代选择器-->

<div class="c3">

    <div class="c4">

        <div class="c5">item3</div>

    </div>

     <div class="c5">item4</div>

</div>

</body>

</html>
与或选择器
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*与选择器	使用 . 相连*/

        p.c1{

            color: red;

        }

         /*或选择器 使用 ，相连*/

        p.c1,#i1{

            color: red;

        }

    </style>

</head>

<body>

<!--与选择器-->

<div class="c1">item1</div>

<p class="c1">item2</p>

<div>item3</div>

<p id="i1">item4</p>

</body>

</html>
兄弟选择器
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*相邻兄弟选择器	使用符号 + 连接*/

       #i1 + div.c1{

           color: red;

       }

       #i1 + div.c2{

           color: red;

       }

        /*普遍兄弟选择器	使用符号 ~ 连接*/

        #i1 ~ div.c2{

           color: red;

        }

        #i1 ~ div{

           color: red;

        }

    </style>

</head>

<body>

<p id="i1">item0</p>

<div class="c1">item1</div>

<div class="c2">item2</div>

<div class="c3">item3</div>

<div class="c4">item4</div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css组合选择器</title>

    <style>

        /*.c2{*/

        /*    color: red;*/

        /*}*/

        /*子代选择器*/

        .c1 > .c3{

            color: chartreuse;

        }

        /*后代选择器*/

        .c1 .c2 .c3{

            color: gold;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">

        <div class="c3">item1</div>

    </div>

</div>

<div class="c1">

    <div class="c3">item2</div>

</div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css组合选择器2</title>

    <style>

        p.c1, #i1{

            color: red;

            background-color: darkseagreen;

            font-size: 30px;

        }

    </style>

</head>

<body>

<div class="c1">item1</div>

    <p class="c1">item2</p>

<div>item3</div>

<p id="i1">item4</p>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css组合选择器3</title>

    <style>

        /*毗邻选择器*/

        /*.c2+.c3{*/

        /*    color: red;*/

        /*}*/

        /*普通兄弟选择器*/

        .c2 ~ div{

            color: gold;

        }

    </style>

</head>

<body>

<div class="c1">item1</div>

<div class="c2">item2</div>

<div class="c3">item3</div>

<div class="c4">item4</div>

<div class="c5">item5</div>

<p>item6</p>

</body>

</html>

3 CSS组合选择器的更多相关文章

  1. CSS 组合选择器

    CSS 组合选择器 注:使用逗号分隔,同时应用. 多个id选择器拼接到一起 含有:i1 i2 i3的标签同时应用css样式. <html> <head> <!-- sty ...

  2. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  3. [04-01]css组合选择器

    /* 私人笔记 */   组合选择器:把基本选择器通过特殊符号串在一起,可以带来一些特殊的意义: 1.源码 <!DOCTYPE html> <html lang="zh&q ...

  4. CSS【04】：CSS组合选择器

    组合选择器 群组(并集)选择器 作用:给所有选择器选中的标签设置属性,可以同时控制多个选择器 格式: 选择器1, 选择器2 { 属性: 值; } 注意点: 必须使用,来连接 选择器可以使用标签名称.i ...

  5. css组合选择器

    组合选择器:1,后代选择器 .main h2 {...}, 使用空格表示 IE6+2,子选择器 .main>h2 {...}, 使用 > 表示 IE7+3,兄弟选择器 h2+p {...} ...

  6. CSS_03_01_CSS组合选择器

    CSS组合选择器 第01步:创建css:with.css @charset "utf-8"; /* 组合选择器,用","隔开 */ .a,.b,div span ...

  7. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  9. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  10. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

随机推荐

  1. ubuntu 23.04 无法联网

    一些参考文章: 解决ubuntu突然无法联网问题 共享主机网络方法: https://www.server-world.info/en/note?os=Ubuntu_22.04&p=squid ...

  2. vm添加新硬盘时，不用重启即可让新硬盘生效

    # 两个命令使用其中一个即可 echo '- - -' > /sys/class/scsi_host/host0/scan echo '- - -' > /sys/class/scsi_h ...

  3. Gin框架使用jwt-go配合中间件认证

    参考文档 // 文档 https://github.com/golang-jwt/jwt https://pkg.go.dev/github.com/golang-jwt/jwt@v3.2.2+inc ...

  4. gin中间件&控制器

    中间件 Gin 框架允许开发者在处理请求的过程中,加入用户自己的钩子(Hook)函数.这个钩子函数就叫中间件,中间件适合处理一些公共的业务逻辑,比如登录认证.权限校验.数据分页.记录日志.耗时统计等. ...

  5. 【系统选型】企业即时通讯（IM）软件调研及供应商对比评估

    企业即时通讯(IM)软件调研及供应商对比评估 1.概览 1.1 即时通讯 即时通讯(Instant messaging,简称IM)是一个终端服务,允许两人或多人使用网路即时的传递文字讯息.档案.语音与 ...

  6. DataGear 制作支持表单交互和多图表联动的数据可视化看板

    对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear的看板表单功能可以快速方便地实现此类需求. 下面的看板示例,包含一个柱状图.一个饼图和一个地图,用户可以通过看板表 ...

  7. 【Azure Key Vault】使用Azure CLI获取Key Vault 机密遇见问题后使用curl命令来获取机密内容

    问题描述 在使用Azure Key Vault的过程中,遇见无法获取机密信息,在不方便直接写代码的情况下,快速使用Azure CLI指令来验证当前使用的认证是否可以获取到正确的机密值. 使用CLI的指 ...

  8. 【Azure Kubernetes】通过 kubelogin 进行非交互式登录AKS

    问题描述 当对AKS的登录方式(认证和授权)从"Local Account with Kubernetes RBAC "改变为"Azure AD authenticati ...

  9. 【Azure 应用程序见解】在Azure门户中，创建App Service（应用服务）时，无法一起创建Application Insights的问题

    问题描述 创建Web应用时启用监视的问题.Azure管理员(Admin)用户下分配了 一个子用户.但是在使用子用户创建WEB应用的时候,启用 Application Insights 选项的 &quo ...

  10. 容器与 Pod

    现在 Docker 的流行程度越来越高,越来越多的公司使用 Docker 打包和部署项目.但是也有很多公司只是追求新技术,将以前的单体应用直接打包为镜像,代码.配置方式等各方面保持不变,使用 Dock ...