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 ...
随机推荐
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
- js子窗口修改父窗口内容
在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的一个元素中.按照一般的写法,我们需要用到类似如下的语句: 1.window.parent.d ...
- jquery获取浏览器高度、宽度和滚动条高度(来自网络)
Jquery代码: alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 ale ...
- wm_char
用于接收键盘输入的消息 int CXuexi2View::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CView::OnCreate(lpCreateS ...
- phpcms v9联动菜单实现筛选
<!--初始化init--> {php $theurl = "index.php?m=content&c=index&a=lists&catid=$cat ...
- Destoon后台修改公司会员资料信息的必填项限制修改
/template/default/member/edit.htm module\member\admin\template\member_edit.tpl.php module\member\adm ...
- 使用telnet操作memcache,一般不常用
使用telnet操作memcache,一般不常用 1.使用方法 1. 连接到memcached telnet 192.168.1.100 11211 add name 0 60 5 [说明 ...
- linux“批处理”脚本
依次执行A B C3条语句 最简单的 写如下代码 #!/bin/sh A B C 保存为test.sh然后添加执行权限chmod +x test.sh然后执行该脚本./test.sh
- iOS开发——C篇&预处理
其实在C语言的远行过程中,有这样一个流程, 编译:C----〉可执行文件(可以运行的) 1:.C------.i 预处理(之前和之后还是C语法)2: .i-------.s 编译(之前是C语法,之后是 ...
- CentOS 网络设置修改 指定IP地址 DNS 网关(转)
CentOS 网络设置修改 指定IP地址 DNS 网关(实测 笔记) 环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 ...