CSS子选择器与后代选择器的区别
p > span{
color:blue;
}
<p>
嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙子</b></span>
</p>
这样会影响<p>标签里直系子元素<span>及<span>的子孙 “css好牛逼! 是啊也影响孙子” 会变蓝色,“也影响子孙”变蓝色是因为CSS继承
p > span{
color:blue;
}
<p>
<em>嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙子</b></span></em>
</p>
这样p标签里的span及其子孙是不受影响的,因为有隔代,不能隔代选择,子选择器必须直系
这时应该用后代选择器 p span { color: blue;}
CSS子选择器与后代选择器的区别的更多相关文章
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
通配符选择器 * 与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B 对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...
- CSS的子选择器与后代选择器的区别
来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...
- web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用
1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- css 串联选择器和后代选择器
串联选择器:作用在同一个标签上 <div class=”a” id ="qq"><span>look at the color</span>&l ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css——子代与后代选择器
一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的 子元素 中的 li元素, ...
随机推荐
- 无限重启:windows更新之后,在输入密码页面无限重启进入不了系统
解决办法:windows更新之后,在输入密码页面无限重启 总体思路:进入安全模式(如何进入,下文将讲述) --> 点击疑难解答 --> 点击高级选项 --> 点击启 ...
- 本文可能是国内第一篇介绍C/4HANA Foundation的中文博客
SAP C/4HANA从去年发布已经过去了一年多的时间,C/4HANA的从业者,对于这五朵云里包含的产品集,想必都有了一些了解. Jerry注意到,SAP C/4HANA Foundation这个概念 ...
- vue-cli脚手架——2.0版本项目案例
一.[准备工作] Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. Git 各平台安装包下载地址为:http://git-scm.com/dow ...
- 认识和学习redis
redis VS mysql """ redis: 内存数据库(读写快).非关系型(操作数据方便) mysql: 硬盘数据库(数据持久化).关系型(操作数据间关系) 大量 ...
- 用Jmeter做性能测试,之后报表展示
https://octoperf.com/blog/2017/10/19/how-to-analyze-jmeter-results/ 看到性能测试平台的开发,我在想需要什么功能,报表需要什么样子的 ...
- leetcode刷题-1
小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的guess数组为 小 ...
- Mongoose初使用总结
连接mongoose mongoose连接数据库有两种方式 第一种: 'use strict'; const mongoose = require('mongoose'); mongoose.conn ...
- 0013SpringBoot处理国际化问题
1.application.properties中指明国际化文件所在路径和文件前缀 2.登录页面用#{}的形式从国际化配置文件中取值 3.编写国际化文件 ----------------------- ...
- element-ui upload组件 onchange事件 传自定义参数
<el-upload class="upload-demo" list-type="picture" accept=" ...
- 10 loader - 配置处理less文件的loader
第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...