CSS后代选择器“空格”和“>”的使用辨析

时间：2021-09-24 09:27:30

要点：

　　1. “空格”：包含子孙

　　2. “>”：含子不含孙

举个栗子：

　　html代码如下

 <body>

     <div class="parent">

         <p>1p</p>

         <div>2div

             <p>-2.1p</p>

             <p>-2.2p</p>

             <a>-2.3a</a>

         </div>

         <p>3p</p>

         <p>4p</p>

     </div>

 </body>

　　css代码（带空格的后代选择）： 

 .parent p {

     background: red;

 }

　　结果：子代1p 3p 4p 及孙代 2.1p，2.2p都选上了

CSS后代选择器“空格”和“>”的使用辨析

　　css代码（带“>”的后代选择）：

 .parent > p {

     background: red;

 }

　　结果：只有子代1p 3p 4p 选上

CSS后代选择器“空格”和“>”的使用辨析

CSS后代选择器“空格”和“>”的使用辨析的更多相关文章

  1. css后代选择器（div&period;class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  2. CSS 后代选择器

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

  3. CSS系列&lpar;8&rpar; CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  4. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  5. 小tip&colon; CSS后代选择器可能的错误认识——张鑫旭

    一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...

  6. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. css后代选择器

    后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...

  8. CSS后代选择器可能的错误认识

    一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red&q ...

  9. CSS后代选择器&comma;子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

随机推荐

  1. Visualize The Workshop

    这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 今天这篇文章是准备瞎扯的.平常工作的时候,我希望尽可能的将一切自动化,让自己尽可能的舒适与懒惰.两个输 ...

  2. 1&period;ARM的基础知识

    ARM简述 ARM公司既不生产芯片也不销售芯片,它只出售芯片技术授权.ARM技术具有很高的性能和功效,因而容易被厂商接受.同时,合作伙伴的增多,可获得更多的第三方工具.制造和软件支持,这又会使整个系统 ...

  3. HTTP访问的两种方式（HttpClient&plus;HttpURLConnection）整合汇总对比（转）

    在Android上http 操作类有两种,分别是HttpClient和HttpURLConnection,其中两个类的详细介绍可以问度娘. HttpClient: HttpClient是Apache ...

  4. jconsole的使用

    1.首先添加java运行参数: -Xms256m -Xmx1024 -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port ...

  5. Keil 4&period;0 生成bin文件

    在菜单:Flash /configuare falsh tools ... option for Tatget '项目' /User中:在Run User Programs After Build/R ...

  6. android操作sdcard中的多媒体文件（二）——音乐列表的更新

    android操作sdcard中的多媒体文件(二)——音乐列表的更新 原文地址 在上一篇随笔中,我介绍了如何在程序中查询sdcard内的多媒体文件,并且显示到播放列表中,但是,如果在sdcard内删除 ...

  7. iOS 中如何监测某段代码运行的时间

    在iOS里面有时间涉及到网络请求,有时间涉及到数据库的查询,我们需要计算该段代码的效率, 以及执行时间方面的问题,为此,可以使用下面方法: double a = CFAbsoluteTimeGetCu ...

  8. OpenStack&lowbar;Glance

    什么是Glace Glance即image service(镜像服务),就是为创建虚拟机提供镜像的地方 为什么要有Glance 这个问题问的好,openstack就是构建Iaas平台对外提供虚拟机的啊 ...

  9. Swift基础之显示波纹样式

    最近项目用到了蓝牙连接,搜索设备的内容,其中需要搜索过程中出现波纹的动画效果,在这里将项目中OC语言编写的这种动画效果,转换成Swift编写,下面简单介绍说明一下代码. 这里用到了两种方法实现波纹效果 ...

  10. Java Swing 界面中文乱码问题解决（Idea环境）

    编译(build)的时候和运行的时候使用同样的字符集就可以了.这里,我都设置为“UTF-8”.具体做当如下: File->Settings->Build...->Compiler,在 ...

相关文章