
正文
理解CSS中的三种选择器>+~
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、
| p~ul | p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 |
| E+F | 相邻兄弟选择器。选择匹配F的元素,且该元素位于所匹配元素E的后面相邻的位置 |
| E>F | 子包含选择器。F为子元素,E为F的父元素 |
之前很少用到这三种选择器,不过适当使用,真的方便不少。。。
估计理解为~ 就是兄弟咯,且是有父亲的。
> 这个最好理解,父亲的年龄总是大于孩子的,自然就是子包含选择器。
+ 相邻兄弟选择器,自然,要两个兄弟(元素)才会确定选择的那个元素,选择F元素,必须是E元素就是它德 相邻位置。
理解CSS中的三种选择器>+~的更多相关文章
-
css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
-
CSS中的三种基本的定位机制(普通流、定位、浮动)
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
-
《转载》CSS中的三种样式来源:创作人员、读者和用户代理
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...
-
CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
-
python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
-
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
-
深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
-
深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
-
深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
随机推荐
-
ajax error函数
老是去百度 还是自己记下来吧 $.ajax({ url: '/AJAX请求的URL', success: function (data) { alert(data); }, error: functi ...
-
大数据量查询优化——数据库设计、SQL语句、JAVA编码
数据库设计方面: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将 ...
-
SCU3502 The Almost Lucky Number
Description A lucky number is a number whose decimal representation contains only the digits \(4\) a ...
-
[Android应用]《花界》V1.0 正式版隆重发布!
http://www.cnblogs.com/qianxudetianxia/archive/2012/04/05/2433669.html 1. 软件说明(1). 花界是一款看花软件:“看花,议花, ...
-
Win7系统Matlab2013a安装.m文件不自动关联到MATLAB.exe解决方法
1.在matlab命令行中输入以下代码: cwd=pwd; cd([matlabroot '\toolbox\matlab\winfun\private']); fileassoc('add',{'. ...
-
转:在Eclipse中进行C/C++开发的配置方法(20140721最新版)
http://blog.csdn.net/baimafujinji/article/details/38026421 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它 ...
-
ANDROID_MARS学习笔记_S03_007_GoogleMap1
一.简介 二.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <Linea ...
-
vs2010自带的报表
本例用来显示Northwind中的order details表中的数据交分组 1.建立一WinForm程序,并建立一数据库连接,选择order details表,此时会自动建立一个xsd的数据集类,如 ...
-
Android学习笔记12:图像渲染(Shader)
在Android中,提供了Shader类专门用来渲染图像以及一些几何图形. Shader类包括了5个直接子类,分别为:BitmapShader.ComposeShader.LinearGradient ...
-
JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
-
ajax error函数
老是去百度 还是自己记下来吧 $.ajax({ url: '/AJAX请求的URL', success: function (data) { alert(data); }, error: functi ...
-
大数据量查询优化——数据库设计、SQL语句、JAVA编码
数据库设计方面: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将 ...
-
SCU3502 The Almost Lucky Number
Description A lucky number is a number whose decimal representation contains only the digits \(4\) a ...
-
[Android应用]《花界》V1.0 正式版隆重发布!
http://www.cnblogs.com/qianxudetianxia/archive/2012/04/05/2433669.html 1. 软件说明(1). 花界是一款看花软件:“看花,议花, ...
-
Win7系统Matlab2013a安装.m文件不自动关联到MATLAB.exe解决方法
1.在matlab命令行中输入以下代码: cwd=pwd; cd([matlabroot '\toolbox\matlab\winfun\private']); fileassoc('add',{'. ...
-
转:在Eclipse中进行C/C++开发的配置方法(20140721最新版)
http://blog.csdn.net/baimafujinji/article/details/38026421 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它 ...
-
ANDROID_MARS学习笔记_S03_007_GoogleMap1
一.简介 二.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <Linea ...
-
vs2010自带的报表
本例用来显示Northwind中的order details表中的数据交分组 1.建立一WinForm程序,并建立一数据库连接,选择order details表,此时会自动建立一个xsd的数据集类,如 ...
-
Android学习笔记12:图像渲染(Shader)
在Android中,提供了Shader类专门用来渲染图像以及一些几何图形. Shader类包括了5个直接子类,分别为:BitmapShader.ComposeShader.LinearGradient ...
-
JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...








