CSS选择器笔记,element element和element > element 的区别
看官方解释
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 的区别的更多相关文章
- 转:CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...
- 【转】CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...
- CSS选择器笔记
一.元素选择符 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...
- css选择器,有箭头与没箭头的区别
div > span 和 div span 的区别 ,即有箭头和没箭头的区别 div > span span 是 div 的下一层级关系 在这种情况下找得到span元素: <div& ...
- CSS 选择器及其优先级
CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...
- 【CSS选择器】理解汇总和记录
1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...
- CSS选择器备忘录
CSS选择器备忘录 基本选择器 Selector Meaning Example 通用选择器 匹配任何元素 * 标签选择器 CSS1中称之为元素选择器,匹配为指定标签的所有元素 div 伪元素选择器 ...
- Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别
<divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...
- 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/ ...
随机推荐
- python调用Java代码
#coding:utf-8 #!/usr/bin/python from jpype import * import os.path,json from ethereum.utils import e ...
- Algorithms - Quick Sort
印象 图2 快速排序过程 思想 通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序的目的. 分析 稳定: ...
- spring分布式事务学习笔记(2)
此文已由作者夏昀授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Model类如下:package com.xy.model 1 package com.xy.model; ...
- 简单介绍Jenkins&持续集成
1.定义 持续集成(Continuous integration),简称CI. 随着软件项目复杂度的增加,就会对集成和确保软件组件能够在一起工作提出了更多的要求-要早集成.常集成. CI不是一项软件开 ...
- 正经学C#_委托
以前不会,甚至连想去学都没想.啧啧啧,我是何等朽木啊. 我先不说其中理念,或者原理,咱就先说最简单的用法.怎么去使用委托. 委托 Delegate 使用委托,就要先定义一个委托.定义一个委托就要先声明 ...
- ios中的奇怪崩溃Signal和EXC_BAD_ACCESS错误分析
什么是Signal 在计算机科学中,信号(英语:Signals)是Unix.类Unix以及其他POSIX兼容的操作系统中进程间通讯的一种有限制的方式.它是一种异步的通知机制,用来提醒进程一个事件已经发 ...
- linux线程切换问题
处理器总处于以下状态中的一种: 1.内核态,运行于进程上下文,内核代表进程运行于内核空间: 2.内核态,运行于中断上下文,内核代表硬件运行于内核空间: 3.用户态,运行于用户空间: 一个进程的上下 ...
- JS基础学习四:绑定事件
添加事件 IE: attachEvent Other: addEventListener var button = document.getElementById("buttonId&quo ...
- (转)TestNG框架提供两种传入参数的方法:
1.从testng.xml传入参数. 如果参数是一些简单的值,可以直接在testng.xml中定义.这也是最常用的一种. 可以在测试用例中给参数一个默认值.这样,即使在xml文件中没有这个变量,你的测 ...
- 利用DSB2017冠军开源代码为LUNA16生成mask
代码地址:https://github.com/lfz/DSB2017 先展示下生成的mask与真实mask subset9 subset8 subset7 subset6 subset5 subse ...