css伪类选择器详细解析及案例使用-----伪类选择器(1)
- 动态伪类选择器:
E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过。
E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过。
E:active :选择匹配的E元素,且匹配的元素被激活。常用于锚点与按钮上。
E:hover :选择匹配的E元素,且用户鼠标停留在元素上。
E:focus :选择匹配的E元素,且元素获得焦点。锚点伪类设置遵守“爱恨原则”,即LoVe/HAte,也就是“link-visited-hover-active”。
- 目标伪类选择器(此为动态选择器,只有存在URL指向该匹配元素时,样式效果才会生效)
E:target :匹配E元素之下的子元素中,被url链接到的那个子元素。
在下边的例子中,被#div1 :target匹配的元素是#div2,他不仅是#div1的子元素,而且被url(a标签href="#div2")指向。两条件缺一不可。(此为自我理解,非官方解释)。<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 :target p{
color: red;
};
</style>
</head>
<body>
<div id="div1">
i am div1
<div id="div2">
i am div2
<p>pppp</p>
</div>
</div>
<a href="#div2">click me</a>
</body>
</html> - 语言伪类选择器:
E:lang(language) :选择匹配E的所有元素,且匹配元素制定了lang属性,而且其值为language。
设置文档语言有两种方法。第一,如果使用HTML5,可如此设置:<html lang="en-US">
或者手工在文档中指定:
<body lang="fr">
- UI元素状态伪类选择器:
E:checked :匹配选中的复选按钮或单选按钮表单元素
E:enabled :匹配所有启用的表单元素
E:disabled :匹配所有禁用的表单元素
css伪类选择器详细解析及案例使用-----伪类选择器(1)的更多相关文章
- css伪类选择器详细解析及案例使用-----伪类选择器(2)
结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...
- 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 ...
随机推荐
- php学习之路
1.php拼接字符串+查询 $floor_id = M('house_floor_input')->where($map1)->field('id')->select(); $flo ...
- Memcached 分布式缓存系统部署与调试
Memcache 分布式缓存系统部署与调试 工作机制:通过在内存中开辟一块区域来维持一个大的hash表来加快页面访问速度,和数据库是独立的;目前主要用来缓存数据库的数据;存放在内存的数据通过LRU算法 ...
- lnmp下安装ffmpeg和ffmpeg-php教程
现在我将我的过程方法发布出来. 以下都是用SSH命令 一.安装ffmpeg 操作系统:centos6 安装ffmpeg有两种方式:①.用源码包安装,这个不知道怎么回事老是报错②用yum命令安装,cen ...
- python内置函数(4)
12.pow: >>> 2**10 1024 >>> pow(2,10) 1024 13.repr():忽略.. 14.reversed():反转.. 1 ...
- OC学习篇之---通知(NSNotificationCenter)
在前一篇文章中我们介绍了OC中很常用的两个技术:KVC和KVO: http://blog.csdn.net/jiangwei0910410003/article/details/41912937,今天 ...
- 从win7到mac os再到win10,体验总结
首先介绍自己的身份,软件工程毕业,现在IT男一枚,php程序员(前端必须会的啦). 原先自己用的是win7系统,大学四年都在用,所以习惯了.开发方式也是传统式的,以文件概念为主(就是手动管理文件),版 ...
- JAVA多态示例
这多态,我觉得是最利害的.在开发大型程序中. 但,也是需要经过足够多的实践经验才能随心利用的. class Quadrangle{ private Quadrangle[] qtest = new Q ...
- AltiumDesigner14板框定义及3D显示图文教程
很多人都跟我反应说AD14不能定义板框大小,或者说是不知道怎么定义板框的大小,确实AD14的操作和AD13或者是AD10的版本斗有一些差异,尤其是现在最新的版本AltiumDesigner14.3.1 ...
- BZOJ3433: [Usaco2014 Jan]Recording the Moolympics
3433: [Usaco2014 Jan]Recording the Moolympics Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 55 So ...
- Linux系统编程(35)—— socket编程之TCP服务器的并发处理
我们知道,服务器通常是要同时服务多个客户端的,如果我们运行上一篇实现的server和client之后,再开一个终端运行client试试,新的client就不能能得到服务了.因为服务器之支持一个连接. ...