css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器
高级选择器:
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器
一、后代选择器:
使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子)
也就是说,box类下的所有span标签 字体颜色都被设置为了红色
.box span{
color:red;
}
二、子代选择器:
使用>表示子代选择器. 之选中box类下第一层的span标签设置为红色
.box>span{
color:red;
}
三、并集选择器:
多个选择器之间用逗号隔开,表示选中页面中的多个标签, 一些共性的元素可以使用并集选择器
所有的div和a中的字体同时被设置成了红色,
div,a{
color:red;
}
四、交集选择器:
使用交集选择器,第一项必须是标签选择器,第二项必须是类选择器 比如:
在所有div中选中类名为active的div并设置背景颜色为红色.
div.active{
background-color:red;
}
css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器的更多相关文章
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- css中那些容易被我们程序猿所忽略的选择器
css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...
- 《CSS权威指南(第三版)》---第二章 选择器
本章的主要内容是,怎么获取文档中的元素给予渲染: 1.元素选择器: 2.ID选择器: 3.CLSSS选择器: 4.通配选择器:*; 5.属性选择器:selector[] 6.部分属性选择器: sele ...
- CSS 交集选择器和并集选择器
交集选择器是and 也就是要同时满足 且只能交2个只能交2个只能交2个,第一个是标记,第二个是class或者id,之间不可以有空格 eg: span.small-height 并集选择器是or,也就 ...
- HTML连载19-子元素选择器&交集选择器
一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- 精通CSS:高级Web标准解决方式(第2版)
精通CSS:高级Web标准解决方式(第2版) 跳转至: 导航. 搜索 层叠重要度:(也就是说.用户!important能够覆盖inline style) !important.用户>作者.最后是 ...
- 精通CSS:高级Web标准解决方案(第二版) 初读笔记
2.1 常用的选择器 1. 类型选择器 p { color: black; } 2. 后代选择器 blockquote p { padding-left: 2em; } 3. ID选择器 #in ...
随机推荐
- SpringBoot 异步线程简单三种样式
引用:在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spring 3.x ...
- Java多线程——对象组合
我们不希望对每一次的内存访问都进行分析以确保程序是线程安全的,而是希望将一些现有的线程安全组件组合为更大规模的组件或者程序,这里介绍一些组合模式,这些组合模式能够使一个类更容易成为线程安全的,并且在维 ...
- 1. C++11保证稳定性与兼容性
1.1 __func__预定义标识符 在c99中,__func__基本功能是返回所在函数的名字,c++11中允许使用在类或结构体中. #include <iostream> using n ...
- vue 在 html 中自定义 tag
v-if,v-for,:key,:style,v-text,@click,:src,:poster,:class,:href
- npm install 报错:ERR! code EINTEGRITY 解决方案
npm升级后,npm install 报错了,报错信息:ERR! code EINTEGRITY到处百度搜索解决方案,终于找到了!“npm cache verify”这条命令帮助了不少人 npm ca ...
- 造一个轮子然后安装到pypi上
之前写了一个爬虫的包,主要是根据自己写爬虫的情况总结一下. 因为每次都要重复写一些代码,所以提炼出来,类似一个框架的样子吧. 开始是放在自己的项目里引用,但如果换了一个项目,就得重新拷一遍,很麻烦. ...
- 那些H5用到的技术(6)——数字滚动特效
前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...
- 学习GO第一天,自我感觉可麻利的开干了-GO语言配置、开发、服务器部署
学习GO第一天,自我感觉可麻利的开干了-GO语言配置.开发.服务器部署 第一步下载 go sdk https://golang.org/dl/ https://storage.googleapis.c ...
- WCF系列教程之客户端异步调用服务
本文参考自http://www.cnblogs.com/wangweimutou/p/4409227.html,纯属读书笔记,加深记忆 一.简介 在前面的随笔中,详细的介绍了WCF客户端服务的调用方法 ...
- ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法
1.ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...