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. nginx 反向代理配置(二)

    上一篇文章主要是对 nginx 各个模块做了一个介绍,以及对什么是反向代理在文章开头做了一个简单介绍,这篇文章我们主要来看下如何进行 nginx 反向代理的配置 proxy 模块      nginx ...

  2. H5新增input标签

    1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...

  3. Arc Engine二次开发——弹窗进行属性查询

    在Arcmap中使用Sapefile格式的矢量数据时,经常会用到其属性查询的功能,弹出窗体然后用户鼠标点击或手动输入查询条件,进而查询到感兴趣的要素.在AE二次开发中也经常需要这个功能,于是在此记录整 ...

  4. python小实例——tkinter实战(计算器)

    一.完美计算器实验一 import tkinter import math import tkinter.messagebox class calculator: #界面布局方法 def __init ...

  5. Android NDK 学习之Android.mk

    Android.mk file syntax specification Introduction: This document describes the syntax of Android.mk  ...

  6. 一个让Java事半功倍的反射库

    在Java和Android中,我们常常会使用反射来达到一些兼容的目的.Java原生提供的反射很是麻烦,使用起来很是不方便.比如我们想要调UserManager的静态方法get,使用原生的实现如下 tr ...

  7. php各种框架的区别

    一.CI框架 CI框架是一个简单快速的PHP MVC轻量级框架,它执行效率高,快速简洁,代码量少,适合中小型项目开发,也可以做大型项目,但扩展能力不是很好,Ci支持的url模式默认为pathinfo形 ...

  8. PHP危险函数的持续学习

    记录下遇到过的PHP危险函数 0x01 escapeshellarg()与escapeshellsmd()联合 先给出官方的定义: escapeshellarg ( string $arg ) : s ...

  9. DDD总览

    DDD总览 领域驱动设计(DDD)编码实践   目录 写在前面DDD总览实现业务的3种常见方式基于业务的分包领域模型的门面——应用服务业务的载体——聚合根实体 vs 值对象聚合根的家——资源库创生之柱 ...

  10. 基于Java+Selenium的WebUI自动化测试框架(七)--IE浏览器的设置

    在上一篇我们讲了关于WebDriver的版本,浏览器初始化,以及下载的设定. 在设置IE浏览器进行WebDriver的测试时,通常会遇见以下几种错误: 1.没有关闭IE浏览器的保护模式. 当运行测试用 ...