1. 动态伪类选择器：
    E:link ：选择匹配的E元素，并且匹配元素被定义了超链接并未被访问过。
    E:visited ：选择匹配的E元素，而且匹配的元素被定义了连接并已被访问过。
    E:active ：选择匹配的E元素，且匹配的元素被激活。常用于锚点与按钮上。
    E:hover ：选择匹配的E元素，且用户鼠标停留在元素上。
    E:focus ：选择匹配的E元素，且元素获得焦点。

    锚点伪类设置遵守“爱恨原则”，即LoVe/HAte，也就是“link-visited-hover-active”。

  2. 目标伪类选择器（此为动态选择器，只有存在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>

    　　

  3. 语言伪类选择器：
    E:lang(language) ：选择匹配E的所有元素，且匹配元素制定了lang属性，而且其值为language。
    设置文档语言有两种方法。第一，如果使用HTML5，可如此设置： 
    <html lang="en-US">

    或者手工在文档中指定：

    <body lang="fr">
  4. UI元素状态伪类选择器：
    E:checked ：匹配选中的复选按钮或单选按钮表单元素
    E:enabled ：匹配所有启用的表单元素
    E:disabled ：匹配所有禁用的表单元素

css伪类选择器详细解析及案例使用-----伪类选择器（1）的更多相关文章

  1. css伪类选择器详细解析及案例使用-----伪类选择器（2）

    结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...

  2. css伪类选择器详细解析及案例使用-----伪元素

    伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于I ...

  3. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  4. CSS选择器详细总结

    一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...

  5. java类生命周期详细解析

    (一)详解java类的生命周期 引言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前 ...

  6. Argo workflow 案例练习和配置详细解析

    参数化 - parameters hello-world-parameters.yaml文件解析 apiVersion: argoproj.io/v1alpha1 kind: Workflow met ...

  7. Thrift之TProcess类体系原理及源码详细解析

    我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...

  8. thrift之TTransport类体系原理及源码详细解析1-类结构和抽象基类

    本章主要介绍Thrift的传输层功能的实现,传输的方式多种多样,可以采用压缩.分帧等,而这些功能的实现都是相互独立,和上一章介绍的协议类实现方式比较雷同,还是先看看这部分的类关系图,如下: 由上面的类 ...

  9. Python之元类详细解析

    一.补充内置函数isinstance和issubclass 1.isinstance是判断一个对象是不是由一个对象产生的 class Foo: pass obj=Foo() print(isinsta ...

随机推荐

  1. [<DDGuessYouLIkeModel 0x7c99faf0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key star.

    出现这个提示是由于以下原因造成: 这里我用到了MJExtension将字典转为模型,但再转为模型的时候,出现这个提示,原因就是因为NSInteger后面多一个一个“*” @property (nona ...

  2. 以下是jQuery和JavaScript实现相同操作的等价代码。

    选择元素  Javascript代码 1.// jQuery   2.var els = $('.el');   3.  4.// 原生方法   5.var els = document.queryS ...

  3. log4j日志输出使用教程

    Log4j是帮助开发人员进行日志输出管理的API类库.它最重要的特点就可以配置文件灵活的设置日志信息的优先级.日志信息的输出目的地以及日志信息的输出格式.Log4j除了可以记录程序运行日志信息外还有一 ...

  4. 请写一个C函数，判断处理器是大端存储还是小端存储，若处理器是Big_endian的，则返回0；若是Little_endian的，则返回1

    [解答] int checkCPU() { { union w { int a; char b; }c; c.a=1; return (c.b==1); } } [剖析] 嵌入式系统开发者应该对Lit ...

  5. [转]链接分析算法之：主题敏感PageRank

    原文引自:http://blog.csdn.net/hguisu/article/details/8005192,感谢 前面的讨论提到.PageRank忽略了主题相关性,导致结果的相关性和主题性降低, ...

  6. 【原创】用shell+ant构建apk

    #!/bin/bash ######################################################################### ## $PRODVERSIO ...

  7. Windows 中JDK安装配置教程

    1.准备工作 a.因为Java JDK区分32位和64位系统,所以在安装之前必须先要判断以下我们的系统为多少位系统.右键计算机-属性查看,我安装的是64位 b.下载JDK,地址:http://www. ...

  8. js十进制等互相转换

    //十进制转其他 var x=110; alert(x); alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16));  / ...

  9. 热门usb无线网卡

    拓实 N910 N95 N82 N81 N89 都是3070的 拓实 N87 G618 是8187的硬功夫 216 310 217 218 300 315 335 350 370 380 510 53 ...

  10. Altium Designer 09 （Protel）总线使用方法（解决导入PCB无网络标号问题）

    弄了两天的Protel总线问题终于解决了,一开始顶层总线连接好后,导入PCB没有网络标号,也就是两个子图信号没连上.现在将正确的连接和设置方法公布如下: 1.首先画好子图的总线,如下图所示.注意:中括 ...