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元素, ...
随机推荐
- node中用的cookie-parser插件设置的max-age,和普通正常设置max-age的计算方式不一样
在cookie-parser中通过max-age设置的cookie的过期时间是按照毫秒计算的; 在普通设置的时候max-age后面的值是按秒计算的;
- Cookie实现记住密码的功能
一.什么是Cookie cookie是一种WEB服务器通过浏览器在访问者的硬盘上存储信息的手段.Cookie的目的就是为用户带来方便,为网站带来增值.虽然有着许多误传,事实上Cookie并不会造成严重 ...
- Linux下常用mysql命令【2】
1.开启和关闭 1.1.开启 systemctl start mysqld 1.2.关闭 systemctl stop mysqld 1.3.重启 systemctl restart mysqld 回 ...
- Chkdsk /f 修复无法识别EXFAT卷文件系统
Chkdsk 工具将错误地报告为损坏的 Windows 7 和 Windows Server 2008 R2 中 exFAT 卷文件系统 适用于: Windows Server 2008 R2 Ser ...
- 最基础的分类算法-k近邻算法 kNN简介及Jupyter基础实现及Python实现
k-Nearest Neighbors简介 对于该图来说,x轴对应的是肿瘤的大小,y轴对应的是时间,蓝色样本表示恶性肿瘤,红色样本表示良性肿瘤,我们先假设k=3,这个k先不考虑怎么得到,先假设这个k是 ...
- 通过getResourceAsStream方法获取项目下的指定资源
properties配置文件调用 通过getResourceAsStream方法获取项目下的指定资源 一:获取src下的指定资源 1). Class.getResourceAsStream(Strin ...
- Idea中用来遍历list集合的快捷键
使用Intellij idea时,想要快捷生成for循环代码块: itar 生成array for代码块 for (int i = 0; i < array.length; i++) { = a ...
- idea的jdk版本问题
问题描述: 解决: 检查以上是否版本一致. 不行就再检查下面的: 如果上面的方法还是不行的话,就建议你改一下pom文件中的maven插件编译级别,可以通过搜索所有的pom.xml,1.6这个关键词,就 ...
- pandas 3
参考资料:https://mp.weixin.qq.com/s/9z3JVBkZpasC_F0ar_7JJA 删除多列:df.drop(col_names_list, axis=1, inplace= ...
- 用于异步事件驱动的 P 语言 P Language
微软最近开源了P语言,致力于在Linux.macOS和Windows上编写安全的异步事件驱动程序. 微软将P描述为一种领域特定语言,对异步系统的组件间通信进行建模,例如嵌入式.网络或分布式系统.P程序 ...