码迷,mamicode.com
首页 > Web开发 > 详细

CSS之伪类

时间:2016-09-13 13:27:48      阅读:1335      评论:0      收藏:0      [点我收藏+]

标签:

1.

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

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

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

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

以上四种伪类应用于超链接时,顺序不能改换

超链接:

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

<a href="#">pmx-cnblogs</a>
技术分享

 

 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>
技术分享

CSS之伪类

标签:

原文地址:http://www.cnblogs.com/bibiafa/p/5867942.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!