看官方解释

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div p

 {

 background-color:yellow;

 }

 </style>

 </head>

 <body>

 <div>

 <p>段落 1。 在 div 中。</p> <!--黄色背景-->

 <p>段落 2。 在 div 中。</p> <!--黄色背景-->

     <span><p>121234</p></span> <!--黄色背景-->

 </div>

 <p>段落 3。不在 div 中。</p>

 <p>段落 4。不在 div 中。</p>

 </body>

 </html>

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

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

<!DOCTYPE html>

<html>

<head>

<style>

div>p

{

background-color:yellow;

}

</style>

</head>

<body>

<h1>Welcome to My Homepage</h1>

<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p> <!--黄色-->

</div>

<div>

<span><p>I will not be styled.</p></span> <!--p在span里。但是p的父元素是span，所以这里不是黄色-->

</div>

<p>My best friend is Mickey.</p>

</body>

</html>

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. c#设计模式-单例模式【转】

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题 public class Singleton { private static Singleton _instance = ...

  2. Http工作原理（转）

    HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少.它不仅保证计算机正确 ...

  3. RxJS的基础

    RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介 通常, ...

  4. [SinGuLaRiTy] 2017-07-22 NOIP2017 模拟赛

    [SInGuLaRiTy-1029] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. <全是看看代码就会的水题,偷个懒不单独写题解了~& ...

  5. [SinGuLaRiTy] 图论题目复习

    [SInGuLaRiTy-1027] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. [Vijos 1423] 最佳路线 题目描述 年久失修的 ...

  6. C#调用WCF问题汇总

    1.添加服务后无法引用,添加服务时打开高级,将下面的选项去掉就可以引用了. 2.在程序中引用后,运行时报“找不到引用协定‘’的默认终结点元素”错误,这是由于在工程的App.config里没有生成配置节 ...

  7. luogu4430 小猴打架

    假硕讲了个prufer编码和Caylay公式 我为了证明prufer编码没用 所以用矩阵树定理证明了Caylay公式 让我们用矩阵树定理推一波 首先这个小猴打架最后会打成一棵树,这棵树是N个点的完全图 ...

  8. [TJOI2013]松鼠聚会 BZOJ 3170

    题目描述 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为点( ...

  9. HDU1253 胜利大逃亡 （BFS）

      胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  10. 用勤哲excel服务器开发旅行社管理软件

    做这个旅行社管理软件之前,旅行社给我的印象就是“拉客”与“接客”,业务模式应该比较简单.但做起这样一个旅行社管理软件,才发现麻雀虽小.五脏俱全,一个旅行社的运作,牵扯到的方方面面远远超出自己之前的理解 ...