看官方解释

element element  例子: div p 官方解释:div内部所有的p元素

就是说 只要p在div内部。如果 p在span内部，span在div内部，p也算在div内部

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <style>
  5.  div p
  6.  {
  7.  background-color:yellow;
  8.  }
  9.  </style>
  10.  </head>
  11.  <body>
  12.  
  13.  <div>
  14.  <p>段落 1。 在 div 中。</p> <!--黄色背景-->
  15.  <p>段落 2。 在 div 中。</p> <!--黄色背景-->
  16.      <span><p>121234</p></span> <!--黄色背景-->
  17.  </div>
  18.  
  19.  <p>段落 3。不在 div 中。</p>
  20.  <p>段落 4。不在 div 中。</p>
  21.  
  22.  </body>
  23.  </html>

element > element 例子 div > p  ，官方解释: 选择父元素为 <div> 元素的所有 <p> 元素。

p在span内部，span在div内部，p这时的父元素不是div而是span,那么p没有被中，p是div孙子元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div>p
  6. {
  7. background-color:yellow;
  8. }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <h1>Welcome to My Homepage</h1>
  14. <div>
  15. <h2>My name is Donald</h2>
  16. <p>I live in Duckburg.</p> <!--黄色-->
  17. </div>
  18.  
  19. <div>
  20. <span><p>I will not be styled.</p></span> <!--p在span里。但是p的父元素是span，所以这里不是黄色-->
  21. </div>
  22.  
  23. <p>My best friend is Mickey.</p>
  24. </body>
  25. </html>
  26.

CSS选择器笔记，element element和element > element 的区别的更多相关文章

  1. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  2. 【转】CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...

  3. CSS选择器笔记

    一.元素选择符 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...

  4. css选择器，有箭头与没箭头的区别

    div > span 和 div span 的区别 ,即有箭头和没箭头的区别 div > span span 是 div 的下一层级关系 在这种情况下找得到span元素: <div& ...

  5. CSS 选择器及其优先级

    CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...

  6. 【CSS选择器】理解汇总和记录

    1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...

  7. CSS选择器备忘录

    CSS选择器备忘录 基本选择器 Selector Meaning Example 通用选择器 匹配任何元素 * 标签选择器 CSS1中称之为元素选择器,匹配为指定标签的所有元素 div 伪元素选择器 ...

  8. Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别

    <divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...

  9. switchable css dark theme in js & html custom element

    switchable css dark theme in js & html custom element dark theme / dark mode https://codepen.io/ ...

随机推荐

  1. Xcode编译报错信息总结

    1.dyld: Library not loaded: @rpath/.../xxx.framework 一般与这个库的加载路径有关,先看看是否将静态库设置成了动态库(库的Mach-o Type选项) ...

  2. signalR之java client的websocket BUG处理

    最近在用SignalR,服务端已经写好(老铁,没毛病,很稳),然后有坑的是我还得写App端,那就撸吧,java也不是什么很难的东西.奈何坑多(已经踩了一波android的控件bug),这次遇到了MS的 ...

  3. 消息队列开发记录笔记-ActiveMQ

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5.1-bin.zip,然后双击a ...

  4. oracle sql 字段行转列

    数据库中原先如图: 现在要吧WHMM行转列: conncect by用于确定列的个数

  5. day02.2-常用Linux命令整理

    Linux命令语法格式:   命令    [选项]    [参数] 1). 命令:告诉Linux操作系统执行什么: 2). 选项:说明命令的运行方式.选项部分是以字符‘-’开始的: 3). 参数:说明 ...

  6. JavaScript高级知识点整理

    一.JS中的数组 1.数组的三种定义方式 (1).实例化对象 var aArray=new Array(1,2,3,4,5); (2).快捷创建 var aTwoArray = [1,2,3,&quo ...

  7. City Game UVALive - 3029（悬线法求最大子矩阵）

    题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...

  8. get与post（转）

    如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用. 这个答案好像并不是他想要的.于是他继 ...

  9. CSS(九)元素隐藏和利弊

    隐藏元素.无法点击,这之间有什么关系呢? 可以配合我写的 html 食用:https://github.com/dirstart/ScriptOJ/blob/master/OJ_CSS/4.css%E ...

  10. [Shell]Shell学习笔记之for

    关于shell中的for循环用法很多,一直想总结一下,今天网上看到上一篇关于for循环用法的总结,感觉很全面,所以就转过来研究研究,嘿嘿…1. for((i=1;i<=10;i++));do e ...