css伪类选择器详细解析及案例使用-----伪类选择器(2)
- 结构伪类选择器:
<div>
<ul> /*ul:only-of-type*/
<li>one</li> /*li:first-child li:nth-child(2n+1)*/
<li>two</li> /*li:nth-child(2)*/
<li>three</li> /*li:last-child li:nth-child(2n+1)*/
</ul>
<div>adc</div> /*div div:first-of-type*/
<p>para</p>
<div>def</div> /*div div:last-of-type*/
<p>para</p> /*p:nth-of-type(2)*/
<b>ghi<b>
</div>1.E:first-child :作为父元素的第一个子元素的元素E。与E:nth-child(1)等同。
2.E:last-child :作为父元素的最后一个子元素的元素E.与E:nth-last-child(1)等同。
3.E:root :选择匹配元素E所在文档的根元素。
4.E F:nth-child(an+b) ,n取任意正整数与0。选择父元素E的第an+b+1个子元素F。即所选中的元素前有an+b个F类型的兄弟节点。
5.E F:nth-last-child(),类似上方。从后数。
6:E:nth-of-type(n),选择父元素内具有指定类型的第n个E元素。
7:E:nth-last-of-type(n),选择父元素内具有指定类型的倒数第n个E元素。
8:E:last-of-type
9:E:first-of-type
10:E:only-child,父元素只包含一个子元素,且子元素匹配E。
11:E:only-of-type,选择父元素只包含一个同类型的子元素,且该子元素匹配E
12:E:empty:选择没有子元素的元素,且不包含文本节点。 - 否定伪类选择器:
E:not(F),匹配所有除F外的E元素。 - 属性选择器:
1.E[attr] :选择匹配具有attr属性的E元素
2.E[attr=val] :选择匹配具有attr属性的E元素,且属性值为val(val区分大小写)。
3.E[attr|=val] :选择匹配具有attr属性的E元素,且属性值为val或以val开头。
4.E[attr~=val] :选择匹配具有attr属性的E元素,attr属性值具有多个空格分隔的值,且其中一个属性值为val。
5.E[attr*=val] :选择匹配具有attr属性的E元素,且属性值任意位置包含了val。
6.E[attr^=val] :选择匹配具有attr属性的E元素,且属性值以了val开头。
7.E[attr^=val] :选择匹配具有attr属性的E元素,且属性值以了val结尾。
css伪类选择器详细解析及案例使用-----伪类选择器(2)的更多相关文章
- css伪类选择器详细解析及案例使用-----伪类选择器(1)
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- css伪类选择器详细解析及案例使用-----伪元素
伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于I ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- CSS选择器详细总结
一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...
- java类生命周期详细解析
(一)详解java类的生命周期 引言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前 ...
- Argo workflow 案例练习和配置详细解析
参数化 - parameters hello-world-parameters.yaml文件解析 apiVersion: argoproj.io/v1alpha1 kind: Workflow met ...
- Thrift之TProcess类体系原理及源码详细解析
我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...
- thrift之TTransport类体系原理及源码详细解析1-类结构和抽象基类
本章主要介绍Thrift的传输层功能的实现,传输的方式多种多样,可以采用压缩.分帧等,而这些功能的实现都是相互独立,和上一章介绍的协议类实现方式比较雷同,还是先看看这部分的类关系图,如下: 由上面的类 ...
- Python之元类详细解析
一.补充内置函数isinstance和issubclass 1.isinstance是判断一个对象是不是由一个对象产生的 class Foo: pass obj=Foo() print(isinsta ...
随机推荐
- 将图片转换为Base64
string Imagefilename 硬盘路径 protected string ImgToBase64String(string Imagefilename) { try { Bitmap ...
- 2.1 Java I/O简史
Java 1.0 到 1.3 中的 IO 没有而 Java 1.4 中引入的 NIO 有的“改进”:非阻塞IO.缓冲区.通道层.字符集.内存数据.Perl(正则表达式之王): 下一代 I/O-NIO. ...
- js限制textarea文本框的文字个数
现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能.今天带来的这个Js限制表单文本 框文字数量的例子,相信有此方面需要的是个不错的参考.为了便于 ...
- mysql时间int日期转换
select from_unixtime(1350437720);select unix_timestamp(now());插入用 unix_timestamp(date)查询用from_unixti ...
- template of class
class template will call the constructor of its member object before constructor itself......
- 深入理解querySelector(All)
querySelector和querySelectorAll同属于Selectors API Level 1规范,该规范早在2006年就已经开始发展,并在2007年10月形成querySe ...
- C 語言中的編譯指示 (Pragma)
編譯指示 #pragma 是用來告知編譯器某些特殊指示,例如不要輸出錯誤訊息,抑制警告訊息,或者加上記憶體漏洞檢查機制等.這些指示通常不是標準的 C 語言所具備的,而是各家編譯器廠商或開發者所制定的, ...
- QT文档如何使用
http://blog.csdn.net/chenlong12580/article/details/7389588
- RTSP Monitor的总结
项目描述: 一个本地的IP Camera 实时发送RTSP视频流到本机上,视频的帧是H264编码,需要解码并显示到屏幕上.并把每帧视频对应的时间戳转换成日期年月日时分秒打印到每帧的图像上显示. 使用 ...
- java中jsoup框架解析html
今天遇到对网页内容进行操作,思考了一下,先获取连接后的html内容,然后对html文档进行操作呗.思路没有问题,但是问题还是不少.于是便找到了jsoup这个神器了... 1.什么是jsoup? 百度百 ...