复合选择器介绍

  • 复合选择器其实很好理解，说白了就跟我们生活中的有血缘关系家庭成员一样，通过标签或者class属性或id属性，去找对应的有血缘关系的某个选择器，具体的大家往下看哦。
  • 如果是初学者对基本的选择器不是很了解的可以看笔者之前写过的基本选择器文章，CSS基本选择器是什么？基本选择器是如何工作，在这就不过多的介绍基本选择器的使用了。

复合选择器说明表

选择器 描述 举例
选择器1 选择器2{属性：值;} 多元素选择器。同时匹配选择器1和选择器2，多个选择器之间用逗号隔开即可。 h1,h2,h3{color: red;}
E F {属性：值;} 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格隔开即可。 .box h1{color: red;}
E>F{属性：值;} 子元素选择器，匹配所有E元素的子元素为F div >h1{color:red;}
E+F{属性：值;} 相邻元素选择器，匹配所有紧跟随着E元素之后的同级元素F div+div{color:red;}

多元素选择器

  • 多元素选择器在工作当中经常会用到，主要用于设置多个元素使用同一种CSS样式。
  • 让我们进入多元素选择器实践，实践内容如：将HTML页面中的div标签、h1标签、p标签、中的文本颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>多元素选择器</title>

</head>

    <style>

        div,h1,p{

           color: red;

        }

    </style>

<body>

    <div>成功不是打败别人，而是改变自己。</div>

    <h1>成功不是打败别人，而是改变自己。</h1>

    <p>成功不是打败别人，而是改变自己。</p>

</body>

</html>

  • 结果图

  • 注意：作用给列表中的所有的选择器设置样式，class类选择器或id选择器也是一样，在这里就拿class类选择器属性值为.box为例，其余的大家可以自己尝试。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>多元素选择器</title>

</head>

    <style>

        .box,h1,p{

           color: red;

        }

    </style>

<body>

    <div class="box" >成功不是打败别人，而是改变自己。</div>

    <h1>成功不是打败别人，而是改变自己。</h1>

    <p>成功不是打败别人，而是改变自己。</p>

</body>

</html>

  • 结果图

后代元素选择器

  • 让我们进入后代元素选择器实践，实践内容如：将class属性值为.box的后代元素文本颜色设置为红色，给大家介绍下结构：class属性值为.box中一共有三个子元素，第一个h1标签、第二个h1标签、第三个div标签、但是第三个子元素为div标签里面还有一个子元素为h1标签或者我们可以理解为class属性值为.box的孙子辈元素。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>后代元素选择器</title>

</head>

    <style>

        .box h1{

           color: red;

        }

    </style>

<body>

    <div class="box" >

        <h1>成功不是打败别人，而是改变自己。</h1>

        <h1>微笑是最初的信仰</h1>

        <div>

            <h1>成功不是打败别人，而是改变自己。</h1>

        </div>

    </div>

</body>

</html>

  • 结果图

  • 注意：后代选择器只能包含在class属性值为.box里面的所有属性。

子元素选择器

  • 让我们进入子元素选择器实践，实践内容如：将class属性值为.box的子元素文本颜色设置为红色，给大家介绍下结构：class属性值为.box中一共有三个子元素，第一个h1标签、第二个h1标签、div标签、但是第三个子元素为div标签里面还有一个子元素为h1标签或者我们可以理解为class属性值为.box的孙子辈元素。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>子元素选择器</title>

</head>

    <style>

        .box > h1{

           color: red;

        }

    </style>

<body>

    <div class="box" >

        <h1>成功不是打败别人，而是改变自己。</h1>

        <h1>微笑是最初的信仰</h1>

        <div>

            <h1>成功不是打败别人，而是改变自己。</h1>

        </div>

    </div>

</body>

</html>

  • 结果图

  • 注意：子元素选择器和后代元素选择器是不样的，子元素选择器是将class属性值为.box中的子元素设置CSS样式，后代元素选择器是将class属性值为.box中的所有元素设置CSS样式，现在大家应该明白了，为什么div标签中的h1标签文本颜色没有被渲染的原因了吧，因为div标签中的h1标签是孙子辈。

相邻元素选择器

  • 相邻元素选择器必须满足以下条件才会匹配。
  • E元素与F元素必须是兄弟关系，意思就是平辈关系。
  • E元素与F元素必须要紧挨着，就是之间不能有任何元素阻挡。
  • 要求F元素一定是在E元素的下面。
  • 让我们进入相邻元素选择器实践，实践内容如：将HTML页面中的class属性值为.box的相邻元素文本颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相邻元素选择器</title>

</head>

    <style>

        .box + h1{

           color: red;

        }

    </style>

<body>

    <h1>我在上面学习</h1>

    <div class="box" >

        <h1>成功不是打败别人，而是改变自己。</h1>

    </div>

    <h1>我在下面学习</h1>

</body>

</html>

  • 结果图

  • 注意：大家一定要注意以上的2个必须和1个一定的规则，否则CSS样式不会被渲染。

CSS复合选择器是什么？复合选择器是如何工作的更多相关文章

  1. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  2. CSS样式表-------第二章：选择器

    二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <met ...

  3. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  4. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  5. css知多少（5）——选择器

    1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选 ...

  6. CSS基础知识点（二）——选择器

    在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...

  7. css中的7中属性选择器

    在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...

  8. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  9. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  10. css中最基本几个选择器

    css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...

随机推荐

  1. POWERUP攻击渗透实战2

    准备环境: kali linux 攻击机 已获得靶机meterpreter(非管理)权限 win7 靶机  拥有powershell环境 运用到的模块:Get-RegistryAlwaysInstal ...

  2. Spring Boot2 系列教程(十四)CORS 解决跨域问题

    今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...

  3. Python 3 既是激进的又是克制的，这些提议被否决了

    [译]PEP 3099--Python 3 中不会改变的事情 导语: Python 3.8 已经发布了,引进了不少变更点.关于 3.9 预计引入的修改,也披露了一些.我们之前还关注过 GIL 的移除计 ...

  4. Ubuntu16.04搭建boost环境

    下载地址:http://sourceforge.net/projects/boost/files/boost/1.58.0/boost_1_58_0.tar.bz2/download 编译前所需的库 ...

  5. 《全栈性能测试修炼宝典JMeter实战》学习记录

    说明:原书中jmeter版本为2.x,我的笔记中截图为5.x

  6. sql查询入门

    SQL语言是一门相对来说简单易学却又功能强大的语言,它能让你快速上手并很快就能写出比较复杂的查询语句.但是对于大多数开发者来说,使用SQL语句查询数据库的时候,如果没有一个抽象的过程和一个合理的步骤, ...

  7. Rancher与ARM深化战略合作，“软硬结合”加速边缘计算时代

    时至今日,许多企业已将边缘计算列为战略目标,对于部分企业而言,边缘计算则已成为它们势在必行的部分.而随着对应用软件和硬件能力的需求不断增长,容器和Kubernetes已发展为边缘计算领域备受瞩目的一项 ...

  8. Django之CBV视图源码分析（工作原理）

    1.首先我们先在urls.py定义CBV的路由匹配. FBV的路由匹配: 2.然后,在views.py创建一名为MyReg的类: 注意:该类必须继续View类,且方法名必须与请求方式相同(后面会详解) ...

  9. day20作业

    1.下面这段代码的输出结果将是什么?请解释. class Parent(object): x = 1 class Child1(Parent): pass class Child2(Parent): ...

  10. Spring（五）Spring缓存机制与Redis的结合

    一.Redis和数据库的结合 使用Redis可以优化性能,但是存在Redis的数据和数据库同步的问题. 例如,T1时刻以将 key1 保存数据到 Redis,T2时刻刷新进入数据库,但是T3时刻发生了 ...