CSS复合选择器是什么？复合选择器是如何工作
复合选择器介绍
- 复合选择器其实很好理解，说白了就跟我们生活中的有血缘关系家庭成员一样，通过标签或者
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复合选择器是什么？复合选择器是如何工作的更多相关文章
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- CSS样式表-------第二章：选择器
二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <met ...
- css知多少（6）——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css知多少（5）——选择器
1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选 ...
- CSS基础知识点（二）——选择器
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...
- css中的7中属性选择器
在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css中最基本几个选择器
css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...
随机推荐
- Qt5教程: (5) Lambda匿名函数的使用
Lambda是C++11的新特性, 首先看看你的.pro项目文件里有没有CONFIG += c++11这句话, 没有就加上. 下面新建一个工程, 具体步骤就不多说了 然后给主窗口添加一个按钮b, 并且 ...
- webpack——简单入门
1.介绍 Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步 ...
- vue-router之to属性赋值
to属性赋值 <!-- html --> <div id="app"> <router-link to="/bj/朝阳区"> ...
- MFC连接Sqlserver
下载 ado2.h和ado2.cpp文件 在VC++ 目录-->包含目录 -->添加 msado15.dll, msjro.dll 目录. // TODO: 连接sqlserver, 在 ...
- 百万年薪python之路 -- 模拟三次账号登录锁定功能
用代码实现三次用户登录及锁定(选做,时间充足建议做一做) 项目分析: 一.首先程序启动,显示下面内容供用户选择: 1.注册 2.登录 a.用户选择登录的时候,首先判断用户名在userinfo.txt表 ...
- vue 开发插件流程
UI demo UI 插件汇总 我的github iSAM2016 在练习写UI组件的,用到全局的插件,网上看了些资料.看到些的挺好的,我也顺便总结一下写插件的流程: 声明插件-> 写插件-&g ...
- 持久层框架JPA与Mybatis该如何选型
一.现状描述 目前java 持久层ORM框架应用最广泛的就是JPA和Mybatis.JPA只是一个ORM框架的规范, 对该规范的实现比较完整就是Spring Data JPA(底层基于Hibernat ...
- vue+uwsgi+nginx部署luffty项目
在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/fil ...
- 2018.8.10 python中的迭代器
主要内容: 1.函数名的使用 2.闭包 3.迭代器 一.函数名的运用 函数名是一个变量,但他是一个特殊的变量,与括号配合可执行函数的变量. 1.函数名的内存地址 def func(): print(' ...
- SSM简历模板1.0
张三 xxx-xxxx-xxxx| xxxxxxx@qq.com| 南京 x岁 | 籍贯:江苏 已离职 | 求职意向:java开发工程师 | 期望薪资:面议 专业技能 1.熟悉MVC体系结构模式.B/ ...