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/ ...
随机推荐
- [转载]应用 Valgrind 发现 Linux 程序的内存问题
应用 Valgrind 发现 Linux 程序的内存问题 如何定位应用程序开发中的内存问题,一直是 inux 应用程序开发中的瓶颈所在.有一款非常优秀的 linux 下开源的内存问题检测工具:valg ...
- 根据某条件给GridView符合条件的值画上删除线
如博文标题,根据某些条件对GridView控件中,对符合条件的值画上删除线效果.实现这些要求,只人捕获到哪些符合要求的数据即可.GridView控件是在TemplateField模版显示数据,Insu ...
- 在Repeater控件的OnItemDataBound获取数据源记录总数
Insus.NEt曾经有写过一篇<Repeater控件最后一笔记录高亮显示> ,它的实现是先宣告一个页面级的变量,然后在Data_Binding()方法内获取数据源的记录总数. 本篇是的重 ...
- PHP 符号
注解符号: // 单行注解 /* */ 多行注解 引号的使用 ’ ’ 单引号,没有任何意义,不经任何处理直接拿过来; " "双引号,PHP动态处理然后输出,一般 ...
- ASPxGridView KeyFieldName
KeyFieldName="查询表的主键名称"
- 本地化ASP.NET core模型绑定错误消息
默认错误消息: MissingBindRequiredValueAccessor A value for the '{0}' property was not provided. MissingKey ...
- kuangbin专题七 HDU1754 I Hate It (单点修改维护最大值)
很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...
- linux查找包含某个字符的文件并导出文件名
find ./ -name "*" | xargs grep -l "字符串" > 1.txt
- X星球居民小区的楼房全是一样的...
每周一题之3 [问题描述] X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: ...
- Nginx多域名负载均衡配置
Nginx负载均衡设置 环境: 负载均衡:192.168.188.128:80 Web1:192.168.188.128:81 Web2:192.168.188.129:80 正式环境中,需要解析域名 ...