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. webrtc 渲染音频时遇到的问题

    有用户反馈连麦时,直播间会有电流声,后面排查发现是 webrtc 内部播放器渲染音频时,用户的播放设备不支持 48000hz 采样率(我们传输的音频采样率都是 48000hz),导致音频数据受损而出现 ...

  2. 【Java复健指南08】OOP中级03【完结】-Object类和一些练习

    前情回顾:https://www.cnblogs.com/DAYceng/category/2227185.html Object类 equals方法 "=="与equals的区别 ...

  3. 【C++ OOP 02 对象的初始化和清理】构造/析构函数、深/浅拷贝、初始化列表以及静态成员

    [对象的初始化和清理] 生活中我们买的电子产品都基本会有出厂设置,在某一天我们不用时候也会删除一些自己信息数据保证安全 C++中的面向对象来源于生活,每个对象也都会有初始设置以及 对象销毁前的清理数据 ...

  4. 【应用服务 App Service】在Azure Web App的部署文件中，是否可以限制某些文件无法被访问？（如json)

    问题描述 当部署文件到Azure App Service上后,默认访问文件在wwwroot目录中,如appsettings.json文件,在通过URL+文件名的形式可以访问,这样敏感信息会被泄露出去, ...

  5. 【Azure 应用服务】Azure Function App Linux环境下的Python Function，安装 psycopg2 模块错误

    问题描述 在Azure中创建Function App(函数应用), 用以运行Python代码(Python Version 3.7). 通过VS Code创建一个HttpTrigger的Functio ...

  6. Spring Cloud跟Dubbo区别？

    Spring Cloud是一个微服务框架,提供了微服务中很多功能组件,Dubbo一开始时RPC调用框架,核心是解决服务调用间的问题, Spring Cloud是一个大而全的框架,Dubbo更侧重于服务 ...

  7. C++ //set/multiset 容器 //set不可以插入重复的数字 multiset可以插入重复的数字 //ste容器构造和赋值 //set大小和交换 //set 插入和删除 //set查找和统计 //set 和 multiset 区别 //pair 对组创建 //set存放自定义数据类型 //set内置数据 进行排序

    1 //set/multiset 容器 //set不可以插入重复的数字 multiset可以插入重复的数字 2 //ste容器构造和赋值 //set大小和交换 //set 插入和删除 3 //set查 ...

  8. WireShark学习笔记（一）

    1.从WireShark分析网络层协议的传输 下面是网络接口层协议,从图中可以看到两个相邻设备的MAC地址,因此该网络包才能以接力的方式传送到目的地址. 下面是网络层,在这个包中,主要的任务是把TCP ...

  9. 闭关修炼180天----吐血整理MongoDB的学习笔记

    MongoDB 一.MongoDB体系结构 1.1 mongoDB和NoSql mongoDB是一种NoSql,是文档存储的代表. mongoDB是一个基于分布式文件存储的数据库.为web应用提供可扩 ...

  10. zookeeper源码(10)node增删改查及监听

    本文将从leader处理器入手,详细分析node的增删改查流程及监听器原理. 回顾数据读写流程 leader ZookeeperServer.processPacket封装Request并提交给业务处 ...