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子选择器与后代选择器的区别的更多相关文章

  1. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  2. CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  3. CSS的子选择器与后代选择器的区别

    来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...

  4. web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  5. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. css 串联选择器和后代选择器

    串联选择器:作用在同一个标签上 <div class=”a” id ="qq"><span>look at the color</span>&l ...

  7. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  8. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  9. css——子代与后代选择器

    一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的 子元素 中的 li元素, ...

随机推荐

  1. 定时任务cron表达式详解

    参考自:https://blog.csdn.net/fanrenxiang/article/details/80361582 一 cron表达式 顺序 秒 分 时 日期 月份 星期 年(可选) 取值 ...

  2. 弹性布局flex 介绍

    摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  3. iOS音频学习笔记一:常见音频封装格式及编码格式

    (1) pcm格式    pcm是经过话筒录音后直接得到的未经压缩的数据流    数据大小=采样频率*采样位数*声道*秒数/8     采样频率一般是22k或者44k,位数一般是8位或者16位,声道一 ...

  4. Centos7.6进入挂载硬盘后,进入应急模式(emergency mode)而非图形模式解决方法

    Centos7.6进入挂载硬盘后,进入应急模式(emergency mode)而非图形模式解决方法 话说某天我想在centos7.6中挂载个硬盘,结果刚在虚拟机中添加了一块硬盘,再次打开系统时,居然就 ...

  5. Linux命令——procinfo

    简介 proc文件系统是一个虚拟文件系统,包含有关进程和系统信息的文件. proc 文件系统开机时自动挂载并映射到/proc目录.许多程序从/proc目录中检索信息,对其进行处理并使其易于用于各种目的 ...

  6. [Jenkins][centos]1 持续集成 之 配置VNC,部署Jenkins

    痛点:上一篇的AWS部署的VNC不知为啥挂了,死活连不上,因此改申请京东云做部署Jenkins 预计阅读时间:20分钟 更新软件,安装桌面 yum -y update yum -y groupinst ...

  7. UltraISO 软碟通注册(亲测!!!)

    声明:本文仅限学习者共享使用,请勿用来商业行为,否则后果自负!!! 强烈建议!!!支持正版购买通道,请走这里. 免费下载UltralSO软碟通   首先当然是下载安装UltraISO软件,不然怎么** ...

  8. 25道Shell面试题

    1. 用sed修改test.txt的23行test为tset: sed –i ‘23s/test/tset/g’ test.txt 2. 查看/web.log第25行第三列的内容. sed –n ‘2 ...

  9. 团队第六次作业-Beta冲刺及发布说明

    1.相关信息 Q A 作业所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 作业要求 https: ...

  10. linux网络编程之socket编程(六)

    经过一个国庆长假,又有一段时间没有写博文了,今天继续对linux网络编程进行学习,如今的北京又全面进入雾霾天气了,让我突然想到了一句名句:“真爱生活,珍惜生命”,好了,言归正传. 回顾一下我们之间实现 ...