1.

:link                     向未被访问的链接添加样式

:visited                向已被访问的链接添加样式

:hover                  当鼠标悬浮在元素上方时，向元素添加样式

:active                 向被激活的元素添加样式(被点击)

以上四种伪类应用于超链接时，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后，a:link和a:visited两者的顺序没有规定

1.1 超链接:

<style>
a:link{
    color:red;
}
a:visited{
    color:green;
}
a:hover{
    color:blue;
}
a:active{
    color:yellow;
}
</style>

<a href="#">pmx-cnblogs</a>

1.2 div

<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    border:3px solid blue;
    overflow:hidden;
    transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s;
    line-height:100px;
    text-align:center;
}

div:hover{
    background-color:green;
    width:300px;
    height:300px;
    line-height:300px;
    font-size:2em
}
div:active{
    color:yellow;
}
</style>

<div>This is div</div>

正常状态:

鼠标移到div上时的样子:

鼠标左键按下后得样子:

 2. :first-child

p:first-child选择作为某个元素的第一个子元素的p元素，而不是选择p元素的第一个子元素

<style>
#myDiv > p:first-child{
   background-color:#3C6;
}
</style>

<body>
    <p>p8</p>
    <div id='myDiv' style='width:300px;height:300px;overflow:auto'>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>
            <p>p4</p>
            <p>p5</p>
        </div>
    </div>
    <p>p6</p>
    <p>p7</p>
</body>

P1作为myDiv的第一个子元素被选中

 3. :focus

向获得焦点的元素添加特殊样式，比如按钮被点击后，文本框输入文本

<style>
input:focus{
    background-color:yellow;
}
</style>

<input type='text' value=""/>

4. :lang

向带有指定lang属性的元素添加样式

<style>
:lang(zh){
    color:red;
}
</style>

<p lang="zh">p7</p>

5. :target

:target伪类和超链接有关，当我们希望打开页面或者单击按钮定位到页面中某个元素时，常常是这样的

<a href="#jump>jump</a> <!--必须是ID号-->
<p id="#jump">This is paragraph</p>

:target就是捕获点击超链接后，定位到的元素，在:target里面的CSS代码都是控制这个捕获到的元素的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        :target{
            background-color:red;
        }
    </style>
</head>
<body>
    <a href="#jump1">jump To 1</a>
    <a href="#jump2">jump To 2</a>
    <p id="jump1">This is paragraph1</p>
    <p id="jump2">This is paragraph2</p>
</body>
</html>

点击jump to 1时，paragraph1变红。

点击jump to 2时，paragraph2变红

:target表示所有被定位到的元素，背景色改变。如果我们想让paragraph1单独变红，可以这样:

<style>
        #jump1:target{
            background-color:red;
        }
    </style>

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tab_list{
            position: relative;
            margin:50px;
            min-height: 200px;
        }
        .tab_content{
            position: absolute;
            width:600px;
            height:170px;
            padding:15px;
            border:1px solid #91a7b4;
            border-radius:3px;
            box-shadow:0 2px 3px rgba(0,0,0,0.1);
            font-size:1.2em;
            line-height:1.5em;
            color:#666;
            background-color: #fff;
            overflow: hidden;
        }
        .tab_menu{
            position: absolute;
            top:100%;
            list-style-type: none;
            margin:0;
            padding:0;

        }
        .tab_menu li{
            display:inline-block;
        }
        .tab_menu a{
            text-decoration: none;
            display:block;
            padding:5px;
            font-size:12px;
            font-family:"楷体";
            color:#333;
            border:1px solid #91a7b4;
            border-radius: 0 0 5px 5px;
            background-color:#e3f1f8;
            margin-right:10px;
        }
        :target{
            z-index:10;

        }

    </style>
</head>
<body>
    <div class="tab_list">
        <ul class="tab_menu">
            <li><a href="#tab1">标签一</a></li>
            <li><a href="#tab2">标签二</a></li>
            <li><a href="#tab3">标签三</a></li>
        </ul>
        <div id="tab1" class="tab_content">欢迎加设计达人Q群：50063010<br/>
            设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！
        </div>
        <div id="tab2" class="tab_content">
            <p>本Tab切换效果纯CSS3制作，无任何JavaScript</p>
            最新Q群：50063010<br/>
            爱设计，爱分享——设计达人（<a href="http://www.shejidaren.com">http://www.shejidaren.com</a>）
        </div>
        <div id="tab3" class="tab_content">
            <p>高质量设计文章分享平台</p>
            <p>欢迎加设计达人Q群：50063010<br /><a href="http://www.shejidaren.com/">设计达人</a>以原创和分享一些高质量的设计文章为主，希望喜欢</p>
        </div>

    </div>
</body>
</html>

6.:not(selector)匹配不是selector的元素或者选择器，注意selectro并不是字符串

6.1 p:not(.info)----选择除了class='info'之外的所有p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .info{
            color:red;
        }
        .foo{
            color:blue;
        }
        p:not(.info){
            background-color:green;
        }
    </style>
</head>
<body>
    <p class="info">p1</p>
    <p>p2</p>
    <p class='foo'>p3</p>
    <p>p4</p>
</body>
</html>

6.2 :not(p) 选择除p以外的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color:red;
        }
        :not(p){
            color:blue;
        }

    </style>
</head>
<body>
    <p class="info">p1</p>
    <p>p2</p>
    <p class='foo'>p3</p>
    <p id="pp">p4</p>
    <div>sdf</div>
</body>
</html>

注意:

　　1.当使用类选择符或者id选择符时,not前面要跟元素名作限制  p:not(.foo)或者p:not(#pp)不能是:not(.foo)

　   2.当使用元素标签作为选择器是，要给该元素设置样式，然后用:not(selector)来设置非selector的样式，而且它们设置的样式要一致

CSS之伪类的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  3. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  4. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

  5. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  6. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  7. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  8. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  9. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  10. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

随机推荐

  1. java中集合的使用

    集合使用: 先说数组:array :用来存同一种数组类型的容器 eg:现在想把班上所有人的信息存起来 1.每一个人的信息可以用一个对象存起来 2.可以用一个数组来接受(现在数组中要接受的是对象) ob ...

  2. 解决java.lang.InstantiationError: sun.net.ftp.FtpClient

    换用jdk1.6 .如果是放容器里的,也把容器的jdk换成1.6

  3. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  4. [译]SSAS下玩转PowerShell（二）

    上一篇中简单的介绍了SSAS下的PowerShell,这一篇会演示更多的操作,比如根据当前时间创建备份,使用变量去指定处理哪一个分区,以及用XMLA脚本去创建分区,和在PowerShell中调用Pow ...

  5. 学习微信小程序之css2

    一:伪类的使用 .class-btn:active{ color: red;} <button class="class-btn">并集选择器</button&g ...

  6. 破解压缩文件密码rarcrack

    破解压缩文件密码rarcrack   常见的压缩文件格式有ZIP.RAR和7z.这三种格式都支持使用密码进行加密压缩.前面讲过破解ZIP压缩文件,可以使用fcrackzip.对于RAR和7z格式,可以 ...

  7. fork()创建子进程

    fork()系统调用是Unix下以自身进程创建子进程的系统调用,一次调用,两次返回,如果返回是0,则是子进程,如果返回值>0,则是父进程(返回值是子进程的pid) 在fork()的调用处,整个父 ...

  8. 【BZOJ1087】 [SCOI2005]互不侵犯King 状压DP

    经典状压DP. f[i][j][k]=sum(f[i-1][j-cnt[k]][k]); cnt[i]放置情况为i时的国王数量 前I行放置情况为k时国王数量为J #include <iostre ...

  9. a 标签 启用或禁用点击事件

    <a href="#" id="btnAuthCode" class="authCode_btn">获取验证码</a> ...

  10. 深入浅出JMS(二)--ActiveMQ简单介绍以及安装

    现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 上篇博文深入浅出JMS(一)–JMS基本概念,我们介绍了消息通信的规范JM ...